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. Is there any way to add video to 7.1 gallery sections along with just images? Like you used to be able to do in 7.0?
  2. Site URL: http://caper-ukulele-8an9.squarespace.com Is it possible to add another line of copy when you hover over a thumbnail? I'd like the first line to be the name of the client and the second line to be the project name. Ideally it would be another font as well. Attaching image of what I would like it to look like. Thanks for the help!
  3. I am using Squarespace 7.1 to build my website and I would like the photos on my gallery page to display as a masonry grid of three columns. All good until this point. The problem is that by doing so the grid on mobile changes to two columns which is very uncomfortable on a phone. Is there a way to change the grid to one column just on mobile while keeping 3 columns on a desktop? It would be awesome if I could also activate lightbox for desktop while keeping it inactive for mobile, though that's not essential. Thank you!
  4. Site URL: https://www.together-store.com/clothing Hello! I would love to be able to add Tags below the product thumbnails in the grid... between the .grid-title and .grid-prices. I plan to use Tags to function as a way to organize brands on the website as categories will be reserved for, well, categories. Categories are reserved on the lefthand side of the page for actual product categories (shirts, pants, socks, etc.) whereas Tags would be used for individual product brands (Nike, Reebok, Birkenstock, etc.) and would hopefully be shown as described between the .grid-title and .grid-prices. Clicking said brand 'Tag' would link to a page showing all that tags products (effectively a brand page). Hope this makes sense! More than happy to rephrase or include any other info. Any insight or help with this would be greatly appreciated. Thank you so much!! Erik Website: https://www.together-store.com/clothing Password: welcome
  5. Site URL: https://www.rachelwongdesigns.com/illustration Hi, I'd like to make the width of the gallery section of my illustrations smaller (like the width of M, in the usual Squarespace content blocks). I can't figure out how to change this width. The site password is: theotheo Thank you in advance!
  6. Site URL: https://abba.squarespace.com/gallery My site is basically finished but I need help on this one last thing! I created a custom store by using code blocks for individual images, with the corresponding product blocks under each image. (Image attached) There are 11 pages and about 100 separate code blocks. This is the code in each code block... <a href="image-url" class="MagicZoom"> <img src="image-url"></a> Then I place the product block under. Some pages look fine, others look way worse. I just want everything aligned neatly like a grid. Is there a way to tell each code block image to be certain dimensions? Maybe one master code? Even If I have to edit all 100 blocks, it's ok. I just don't want to have to resize and re-upload all my images one by one to the custom files. All I'm looking for is a nice clean grid! 🙂 Last note: I have this in the custom header for each page in the gallery. Could this be messing with something? <style> .product-block .productDetails .product-title { font-family: 'scrubby', alternative-web-safe-font; font-weight: 400; font-style: normal; letter-spacing: 0em; text-transform: uppercase; line-height: 1.4em; font-size: calc(.24vw + 1rem); padding: 0 } </style> If someone could please please help me! I'm SO CLOSE to the FINISH LINE! Many thanks, Elijah
  7. 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.
  8. Site URL: https://www.maartenvanderwilt.com/personalwork 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 have been trying to find older codes to use but nothing seems to work for me. I want to keep the white font. So like this : https://www.maartenvanderwilt.com/personalwork but ten dark instead of the lighter version
  9. I currently have a grid of thumbnail images on the home page of website that links to other pages. (this is a graphic design portfolio website) I have a color overlay hover effect on the images, so when you hover over the image it turns the image a solid blue shade. I would like to change this so each image has a different hover color instead of just one color. Would anyone be able to tell how I can achieve this effect? I've attached a quick example of the effect I'm trying to achieve if that helps. Thank you!
  10. Site URL: https://clarinet-apple-kf7h.squarespace.com/ Hello! I have got a few problems with my website in mobile view. On my homepage, I have got various galleries in grid style with three images next to each other. However, on mobile it puts two pictures in the first row and moves the third to the second row and it looks very unprofessional. I just want them all to appear in the same row as they do on desktop. Furthermore, the footer of my website is a complete mess. My instagram grid is behaving the same as the images, two in the first row and the third in the second row. It also places my logo in a huge size below the next, when it should be small and on the right-hand side next to my contact information. I have attached some screenshots for reference. The first two are how it looks on desktop, the last three how it appears on mobile. How can I fix this? I appreciate your help.
  11. Site URL: https://the-naked-florist.squarespace.com/ I have a couple Masonry grids on my website with a gallery of 3 images. They all have 1 vertical (ratio 3:4) & 2 horizontal images (ratio 3:2). However are leaving a 1px gap below the vertical image so they are not fush on the bottom side of the grid. See images attached. With no luck I have tried the css code: .gallery-masonry .gallery-masonry-item[data-loaded] img { height: 100% !important; } Any suggestions
  12. I'd like to add an image gallery grid and make it so that when you hover over each image in the grid, a different image displays. Is this possible? If it is possible, can someone provide the css code? I can plug in the block IDs myself. Thank you!
  13. Site URL: https://www.preppingdeals.net/deals/daily-prepping-deals-11/26 https://www.preppingdeals.net/deals/daily-prepping-deals-11/26 As you can see, on my page my captions are varied in character length, which eventually causes the images to become misaligned. Is there any way I can lock them in a grid so they look neater?
  14. Site URL: https://www.calixtedavis.com Hi, So i've been trying to figure this out but can't for the life of me and it's so frustrating! Currently, i have Simple Grid Gallery on my Homepage https://www.calixtedavis.com Ideally i'd have maybe 4 columns and 3 rows but when I change the number of columns to 4 the images become huge and I don't see any way to make then smaller in the edit options! I would basically want the images to stay the size that they currently are, but with only 4 columns. Any help would be much appreciated - thanks!
  15. I cannot find a way how to make my layout stay the same on the phone. Having 6 or at least 3 images in a row on the gallery block. Squarespace only allows to have 2. I could do it on a product page tho via this code but cant fix it via gallery page <style> /* Product 2 columns mobile */ @media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-column-gap: 10px; } } </style> Also adjust all these mad gaps Any ideas?
  16. Site URL: http://www.goatshrine.com/goatbby On my website I have one page (a collection page) that is different from all the others, and its proving a bit tricky. As you can an see on my homepage, I have these gallery grid squares that overlay text when you move your cursor over them: http://www.goatshrine.com/ Here on this page I also have a gallery grid (http://www.goatshrine.com/goatbby) and would like for the same thing to happen, but it wont for some reason. There is nothing in the code blocking the piece of code I inserted to do that effect from that page. Also, would there be anyway to give those gallery images, and every block on that page - the text box, images etc. - rounded corners? Thank you very much If it helps, my template is Five. ! - Alice
  17. Site URL: https://www.artonthegrid.com/stories Hi, I'm looking to rebuild the page below as a portfolio page with a simple grid. Right now it's built as a page with inline poster images to allow for a text caption below and text on hover with css. I've been playing with css to allow the text to show up below and on the hover on a portfolio page, but am having no luck (second screenshot). It would ideal to have this page built as a portfolio so it's easier to update. Any help would be much appreciated!
  18. Site URL: https://pike-begonia-fjck.squarespace.com/ Hello, on the page of "classes" i would like to align to centre the last image of the project grid (called "Multiple sets") so that it looks like a row of 2, another row of 2 and last row of just 1. what code should i insert? https://pike-begonia-fjck.squarespace.com/ password: hello123 Thank you
  19. Site URL: https://www.saylinds.com Hey folks, hoping you can help me out with coding a hover effect like this. I'm currently using Image Blocks on my Home + Work pages but ideally I'd like to use a Grid Gallery Block with a hover overlay that displays title, description, and opacity. I'm still in version 7.0 and I haven't found a code recent enough that works. Thanks in advance!
  20. Site URL: https://rachelskim.me/photography Hi Everyone! I have a grid layout of some embed components on this page: rachelskim.me/photography. It is towards the bottom - they are instagram posts laid out in a 4x2 grid. When on a larger desktop screen, the components are able to render perfect, but when on a smaller window size, they seem to overlap (see attachments). Is there a way to have the embed components reduce in size to maintain the grid layout of them on the larger screen?
  21. I would like to have padding between the top images and the section above, only as much as is on the sides and in between, but it's not an option and I don't know how to code. I did a little research but didn't find anything that worked. Hoping someone can help me out!
  22. Site URL: https://www.mathiashannes.com/projects Hi, Is there a way to make the portfolio main grid Masonry? Standard options only allow fixed ratio's. since ther is no more option to connect galleries to summary blocks this would fix a lot. Thank you.
  23. Site URL: https://wisteria-panda-z2eg.squarespace.com/sound-talent pw for the site is: rotorsound Dear All, Is there any way, to apply line breaks in captions such as gallery grid captions? This has been talked about in the past, but I couldn't find solutions for 7.1. In the example website, I would like to apply line breaks wherever I currently have commas. I would even go so far as to labeling them all by hand through code, as suggested by this code, that I found here in the forum: /* image 1 */ .sqs-gallery-block-grid .slide:nth-child(1) .image-slide-title:after { content: "Dinosaur line 2"; display: block; font-size: 13px; font-family: monospace; margin-top: -5px; } /* Image 2 */ .sqs-gallery-block-grid .slide:nth-child(2) .image-slide-title:after { content: "Banana 02"; display: block; font-size: 13px; font-family: monospace; margin-top: -5px; } However, this seems to have been written for 7.0. I cannot get it to work in 7.1. Any pointers would be greatly appreciated! Best, Tonmeister
  24. Site URL: https://www.quiet-ly.com/styling Hi, I'm using 7.1 and I'm trying to increase the margins on the gallery section to match my other sections (M). I'm failing to understand why it's not possible, like with every other section. Can you please help?
  25. Site URL: https://www.mattreynoldsphotography.com/ Hello, hoping someone may be able to help. I am using the Avenue template. Have created a grid-gallery for images and have the box checked to open the image larger in a lightbox if clicked. For the individual images, I have titled each and for some I have a subtitle description area. On the desktop this works perfectly yet on Mobile my title and subtitle does not show up on the individual images when opened. On my phone there is a tiny button where I can enable to read it and then it shows but I don't think people will realize and want to force show it below the image each time. The same way it does on a desktop. Is there any code I can add to make this happen? www.MattReynoldsPhotography.com
  • Create New...