Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'grid-gallery'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://www.jurajsimkovic.com/projects/slovak-national-theatre Hi, as the title says, I would like to add specific captions to specific images in my gallery and, this is important, I want them to only appear in the lightbox view. I don't want them to appear under the images when viewed casually on the site, without lightbox. Most of them are masonry grid-galleries, one of them is a simple grid-gallery. I have just paid for the personal plan and would like to avoid upgrading and paying for the higher tier business plan. The picture attached to this post should clarify the look of the captions. Thank you in advance. Juraj
  2. Hello. I am looking for code that will allow me to change the font size on a gallery grid block ( not a summary block). Any help will be greatly appreciated. Thank You
  3. Is there a way to reverse the order of the photos displayed in a gallery grid? Speaking about a large grid with 80 + images
  4. Site URL: http://www.zondagontwerpers.nl/work-copy I built a portfolio one-paged website for my customer, who wants to show the contributors of each project under every project (I have one project per page section). I've added these contributors in a gallery block as a grid, so the people can be clicked and scrolled through in the lightbox. The problem is that every project has a different amount of contributors. That leads to the galleries having different sized images, unless I make the number of items per row equal, but in that case I'm left with residual space to the right when the number of contributors is less than that number. I want the pictures to be lined out to the right. I was trying to find a way to reverse the row but I can't seem to get it done. The way it is supposed to look is this: And then for example the next project has 4 contributors and I can't get the size the same. The next problem is the mobile and tablet version, on which the pictures are shown either way too small or way too big. My goal is to have them placed in the same manner on mobile as on the desktop version and with the same proportions. I'm looking for a solution that will continue to work on the entire page, for every such block, as I'm using a gallery block grid on every section. Otherwise I will have to update CSS for every new project the customer posts. If that's not possible that's also fine but then I need to figure out the right code for every individual gallery block. Hopefully someone can help. Thanks in advance, Dani
  5. Site URL: https://tricoche.squarespace.com/sommaire-1-gamme Hi there, I would like to know if it is possible to make each image clickable in this section please. It's a gallery (services) and the options only offer a link from the button. My goal is to not use the button and only have the link active on every image. Or if you have another solution for the same result. https://tricoche.squarespace.com/sommaire-1-gamme pw : ts22 Thank you 🙂 Sebastien Services gallery
  6. Hello! I'm building a portfolio grid. I'd like the state of text to be visible. before and after hoover Right now it's set on show text: before hover - but I'd like it to stay on after hoover as well. Hope it makes sense! Cheers! much appreciated
  7. Site URL: https://www.adamamin.com.au/home/cost-house-clovelly I'm building a project page for my photography website. Using the grid: simple layout to show all the images, I find that it crops the images to conform to the aspect ratio. Is there an ability to add a white background instead so that the images can keep their aspect ratio? This is best explained in the website example below: https://derekswalwellprints.com/collections/outdistance Scroll to the bottom to find:
  8. Site URL: https://www.pai.com/payroll-integration-test-page I've seen this question asked a few times, but I haven't been able to get any of the code that's been provided on the other forums to work on my site. I'm designing a page that lists a bunch of partners our clients could choose to work with and have added code that allows users to filter through the available options based on their needs. The page can be found here: https://www.pai.com/payroll-integration-test-page. I would like the captions for each partner's logo (their phone number & website URL) to appear underneath the logo in the lightbox when clicked without having to hover over the image to see the caption and without covering up a large portion of the logo. I'm not a coder (and our in-house developer is on medical leave), so I'm not sure if all the custom code I already have in the page header injection and sitewide header injection is interfering with this working. Any help would be appreciated!
  9. Hi there! I'm going to be showing a grid of logos, and I'd like to be able to allow people to toggle between two versions of the logo from within the grid gallery. I thought maybe I could create a mini slideshow within a gallery grid, but it looks like I can't do that. I'm wondering if there's a way to keep the grid clean with a gallery while also allowing people to toggle between two images for each grid image
  10. Site URL: http://davidzamorano.tv/ Hello there! Embedded video codes on a grid gallery are not working on my homepage. I'm using instead a couple of gif images: for PIC and IBM works, which are considerably heavier compared to using some looping video bits from Vimeo. (please see attached) Any help or tip on this would be very appreciated. To check if everything is ok, I could also share the embedding code I'm using that makes the Vimeo videos loop as gifs. Thanks! 😀
  11. Site URL: https://trombone-seahorse-afp9.squarespace.com/historic-show Hi there, I'm building a website for an art gallery that needs customization. I want to create a product grid list with the paintings available through the gallery. Here's the site and pw: Site: https://trombone-seahorse-afp9.squarespace.com/config/design pw: carmelart There are some landscape and some portraits, so it was important to the gallery to have the paintings not cropped into a particular ratio. I was able to find custom css to make each painting on display in it's full not-cropped orientation. I have the aspect ratio set to 3:2, so the landscape images fill that ratio, where as the portraits are set inside that ratio. Because of this, the portraits are justified to the left. I want to figure out how to center the images within the 3:2 ratio. Also, I customized my Quick View button, but it seems off-centered. Help with this would be greatly appreciated! Here is what I have in my Custom CSS: // Product Gallery View Custom // .grid-image-wrapper img { width: auto !important; height: 100% !important; top: 0 !important; } .ProductList-grid.clear { display: flex; flex-wrap: wrap; justify-content: center; } .ProductItem-details-excerpt { font-family: Tuan !important; } figure.ProductItem-gallery img { width: 100% !important; height: auto !important; left: 0 !important; } //Quick View Custom// span.sqs-product-quick-view-button { visibility: hidden; } span.sqs-product-quick-view-button:after { visibility: visible; content: "QUICK VIEW"; background: #FFFFFF; font-size: 1.4rem; font-family: 'Courier New'; font-weight: 800; color: #C29A5A; padding: 20px 25px; border-radius: 0px; } Thank you, thank you, thank you!
  12. Hi, how do I add a code to a portfolio layout page for the grid images to be black and white and for each to appear in colour only when hovered over after 2 seconds or so? I have tried adding codes to the specific pages advanced section but it just appears as text in the header and nothing changes. Please help!
  13. Site URL: https://www.alxhtchr.com/vault-2 I've created a portfolio grid gallery and worked the code so that it has 1 column without left or right padding; however, I've been trying for hours to find code that will allow the row to be cropped vertically to 50% of the page (if I were to have 2 rows and header hidden you could see their entirety). I want the aspect ratio to be variable so that as the browser window size changes, so does the crop on the photo to remain at 50% of the vertical height. The code I attached in the image has not successfully worked in limiting the row height. I'm looking to imitate this page https://www.shortstache.com/professional Here is my page https://www.alxhtchr.com/vault-2 Would appreciate any help I can get, thanks!
  14. Site URL: https://www.blueglobeinnovation.com Hi I have a gallery section and then a list section and I want to duplicate the list title to sit on top of my gallery section (see below- the drak blue is the gallery). How do i code this text in? There seems to be very littke out there on this topic and I am wondering if i am missing an easy runaround? NothingI have found has adding title text on TOP of a gallery within a gallery section.
  15. Site URL: https://rochellerubin-magnetic.squarespace.com/ Site is under construction. Password: rochelle See page: https://rochellerubin-magnetic.squarespace.com/fictions My client needs a number of grid galleries. She needs title and description to display on both desktop AND mobile. They could display underneath each item when viewing as a grid OR when viewing in lightbox mode. Right now, there is no way to see the description on mobile in a grid gallery. Note: You'll see a stacked gallery. My client specifically wants a grid AND to be able to view the details of each piece (title, size, materials, year). Also note: Mobile Preview (when editing on desktop) indicates that the title and description should be viewable on mobile, but when you actually use a mobile device there is no way to see this information. Also note: You can display titles only (not in lightbox) but no description. Anyone have a line of css that would accomplish this?
  16. Site URL: https://watermelon-tomato-em22.squarespace.com/ Hello, The layout on my portfolio homepage is currently set to Grid: Overlay with 3 Columns. I'm wanting to customize this so that the size of the thumbnails vary in my grid. This site is a good reference of what I'm trying to accomplish and I've attached a comp of what I'm hoping I can make mine look like. My knowledge of CSS is limited so any help is very much appreciated. Thank you! Robert
  17. Site URL: https://www.nbdesignstudio.com/ Hello, I am using 2 different gallery types on my website (Grid Strips & Strips) and individual image blocks. I would like to be able to resize the Grid Strips, Strips, and Individual image blocks for mobile version if possible and I would like the images for all to also appear 2 side by side for less scrolling . I been hunting around for a code to revise with my information and use but its not working out for me. If someone can help me with a solution that would be very much appreciated ! Also this side of my site is not public yet. I have added a password Duchess2001 I have tagged the duplicated portfolios w/ "Need Assistance" with the issues I am having
  18. Site URL: https://sacredcommunityproject.org/sacred-community-podcast I would like some help with this image grid. These are just small icon logo images, and so I don't want any to just be on a single line by themselves and large. My hope would be: That when it needs to shrink, it could just go to two rows of five images each. As it is now, when it gets a little smaller there are 8 on a row and then 2 on a row or 7 and 3. And then in mobile view it is 3, 3 and then 1. I am willing to make this a single row of 8 if there is a way to make it two rows of 4 on mobile. Any help is aprpeciated. If what I am wanting to do is not possible, please just tell me what is possible and I will adjust accordingly. Thanks!
  19. Site URL: https://jaysimala.com/home Does anyone have a fix on how to make the title text on images in the grid format larger? I'm using the Bedford template and 7.0
  20. Site URL: https://gold-cheetah-exh9.squarespace.com/anders Hi everyone! Could someone please help me out with this. I used custom CSS to turn a masonry grid into 2 columns, instead of 1, on mobile view. Now it seems that only one image is clickable, using lightbox, I think? How can i fix this? When you hover over it with mobile view on pc (which of course you cant see on mobile itself) you can see that only the first image shows a loop to press it, the others don't. https://gold-cheetah-exh9.squarespace.com/anders PW: Geheim123 Weirdest thing is, if you go to a different type of photoshoot, for instance this link: https://gold-cheetah-exh9.squarespace.com/familie-en-gezin-shoots (same password) The gallery does work and I'm fairly sure that I used the same code for all of them. Hopefully someone can help me with this!
  21. Site URL: https://lineaskin-3001.squarespace.com/?password=demo Hello everyone 🙂 Does anyone know how to achieve the black gridlines in the website example here in 7.1? Examples would be homepage and services page. Thank you! -DT
  22. Site URL: https://www.matthodgesdesign.com/ Is it possible to add simple image rollover effects to a grid gallery in 7.1? All I want for the image to change to a second image on mouse/cursor hover, and then change back on hover off (preferably with a smooth transition). Clearly this isn't possible with the standard controls, but wondering if possible using CSS and custom files? I've been searching online (and on here) and not found the answer, which is surprising in that I would have thought this would be a sought after feature. On my site I have added a simple brightness hovereffect to the images which gives it some interactivity. But preferably I would find away to change to a second image on mouse hover.
  23. Hi! I am struggling to figure out how to have an image darken when the mouse hovers over it, rather than lighten to the color of the background. I'm working in the Forte template, into which I Frankensteined some code pieced together from various other forum posts and need some help with how to edit it so that the image darkens on hover(like this: http://demo.squarestud.io/grid-gallery-9). I'm pasting the code in use on the site below. Please help me, this is my first foray into code and I am totally clueless! Code: .sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor { opacity: .4; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: absolute; top: 0px; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; padding: 0em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; margin-bottom: 0px !important; pointer-events: none; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { color: #000000; opacity: 0; text-transform: uppercase; font-size: 16px; line-height: 125%; letter-spacing: 3px; margin-bottom: 240px; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: #000000; opacity:1; text-transform: uppercase; vertical-align: middle; font-size: 16px; line-height: 125%; letter-spacing: 3px; margin-bottom: 240px; } @media only screen and (max-width: 400px) { .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: transparent; opacity: 0; } } header#header { padding-bottom: 20px; }
  24. Site URL: https://create.editorx.com/website-template/view/html/2656 The images section https://create.editorx.com/website-template/view/html/2656 Where some images move on scroll and some are sticky
  25. I am using a masonry grid to build my gallery and most of the photos I want to include have a portrait orientation. As a result all of my horizontal photos look really small as their size is adjusted to fit each column. Is there a way to display horizontal photos on multiple columns (maybe full width?) so that they stop looking tiny? I'm building my site on 7.1. Thanks!
  • Create New...