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
  • 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://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
  2. Site URL: http://www.studiofurks.com How do I reduce/remove the spacing between Selected Work and the grid. Please see screenshot:
  3. Hi all, I'm using the Paloma template for my website gohoopday.com. If you scroll down to the sixth fold, you'll see tons of logos. On mobile, these stack (1 per row), which isn't very mobile-friendly. I am trying to get 2 or 3 per row for mobile. On a previous site with a different template, I used a formula similar to the ones listed in the link below, but on this template it's not registering. https://forum.squarespace.com/topic/64554-create-more-than-2-columns-in-mobile-for-grid-gallery/ I've tinkered around and tried this, but it only pushes the logos to the left rather than creating 2 columns. @media only screen and (max-width: 640px) { .gallery-grid-item { width: 50% !important; } } I am wondering if it is because this is a gallery page vs an image gallery. Anyways, I cannot figure it out - please let me know if you can help! Max
  4. 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.
  5. 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
  6. 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?
  7. Site URL: https://blueberry-maroon.squarespace.com/ In the Portfolio Collection overview every gallery grid item is showing a white background which I am not able to make it look transparent (or black). The hover color is the only thing that can be changed, but this is fine as is. What is even stranger is that on the portfolio detail page the image is shown like it is meant to be, on a black background (transparent). What I tried so far is changing every possible color setting I could find and also applying all sorts of custom CSS, but with no luck so far. 🧐 The challenge is to change the white background color to transparent (or black) using custom CSS. I am a noob when it comes to such coding, so if somebody could help me to accomplish this using custom CSS, I would be forever grateful! 🙏 I am using SQSP 7.1 and the password is set to: monaco
  8. Site URL: https://thedetoureffect.com/ Hi there, Hoping somebody can help me with some sleuthing. A few weeks ago I found code suggested on Skillshare that worked really well to wrap the text below my image grid gallery (it was getting cut off and you couldn't read the full title). All of the sudden this week I noticed it just suddenly stopped working, my text is once again not wrapping. See my uploaded image for an example. So then I looked on this forum for different code to try, and found this thread. None of the ideas here worked either. So maybe there's some other code I have elsewhere in my site that is preventing any of these from working? After getting the text wrap to work initially, I added two other unrelated codes later. One was Google Analytics which I just copy/pasted directly, there shouldn't be anything wrong with it. The other was a featherlight thing that I got from this thread so I could have a pop-up when people click on my "pandemic planning" button. Maybe that messed up my text wrapping thing? Grateful for any ideas. My site is thedetoureffect.com. Everything we're talking about is on the home page.
  9. Site URL: http://www.andrewforseth.com How can you change the width on a grid section, specifically masonry if it matters. On layout-engine-sections you can just select S/M/L or specify. On a grid section you can only select full width/full/inset. The rest of my page is content-width--medium and I would like this to align with that. I would love to be able to just go into the code it is showing me in inspect, but squarespace doesn't allow. Here is the code for the section: <section data-test="page-section" data-section-theme="" class="page-section gallery-section full-bleed-section background-width--full-bleed section-height--medium content-width--wide horizontal-alignment--center vertical-alignment--middle " data-section-id="60e4c0e46ee5d321c4199529" data-controller="SectionWrapperController" data-current-styles="{ &quot;backgroundWidth&quot;: &quot;background-width--full-bleed&quot;, &quot;sectionHeight&quot;: &quot;section-height--medium&quot;, &quot;horizontalAlignment&quot;: &quot;horizontal-alignment--center&quot;, &quot;verticalAlignment&quot;: &quot;vertical-alignment--middle&quot;, &quot;contentWidth&quot;: &quot;content-width--wide&quot;, &quot;sectionAnimation&quot;: &quot;none&quot;, &quot;backgroundMode&quot;: &quot;image&quot;, &quot;backgroundImage&quot;: null }" data-animation="none" data-json-schema-section="" data-controllers-bound="SectionWrapperController" data-active="true"> <div class="section-background"> </div> <div class="content-wrapper" style=" "> <div class="content"> <div class="gallery gallery-section-wrapper" style="min-height: 100px;"> <div class="gallery" style="min-height: 100px;"> <!-- Gallery Masonry --> <div class="gallery-masonry" data-controller="GalleryMasonry" data-section-id="60e4c0e46ee5d321c4199529" data-animation="site-default" data-lightbox="false" data-width="full" data-props="{ &quot;scrollAnimation&quot;: &quot;site-default&quot;, &quot;gutter&quot;: 67, &quot;numColumns&quot;: 2, &quot;width&quot;: &quot;full&quot;, &quot;lightboxEnabled&quot;: false }" data-show-captions="false" data-controllers-bound="GalleryMasonry"> <div class="gallery-masonry-wrapper gallery-masonry-list--ready" style="height: 2200px;"> <figure class="gallery-masonry-item" style="position: absolute; width: 502px; transform: translate3d(0px, 0px, 0px);" data-show="true" data-loaded="true"> <div class="gallery-masonry-item-wrapper" data-animation-role="image" style="height: 2200px; overflow: hidden;"> <img data-src="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/14956a2a-d990-480d-94a5-fc316987952e/Desktop-Product_AERO_glow.jpg" data-image="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/14956a2a-d990-480d-94a5-fc316987952e/Desktop-Product_AERO_glow.jpg" data-image-dimensions="1630x7147" data-image-focal-point="0.5,0.5" alt="Desktop-Product_AERO_glow.jpg" data-load="false" style="width: 502px; height: 2200px; object-position: 50% 50%; object-fit: cover;" data-parent-ratio="0.2" class="" data-image-resolution="2500w" src="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/14956a2a-d990-480d-94a5-fc316987952e/Desktop-Product_AERO_glow.jpg?format=2500w"> </div> </figure> <figure class="gallery-masonry-item" style="position: absolute; width: 502px; transform: translate3d(536px, 0px, 0px);" data-show="true" data-loaded="true"> <div class="gallery-masonry-item-wrapper" data-animation-role="image" style="height: 843px; overflow: hidden;"> <img data-src="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/0e5bf618-d816-4b1b-a597-dba083e29f93/Desktop-Purchase_AERO_glow.png" data-image="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/0e5bf618-d816-4b1b-a597-dba083e29f93/Desktop-Purchase_AERO_glow.png" data-image-dimensions="1630x2737" data-image-focal-point="0.5,0.5" alt="Desktop-Purchase_AERO_glow.png" data-load="false" style="width: 502px; height: 843px; object-position: 50% 50%; object-fit: cover;" data-parent-ratio="0.6" class="" data-image-resolution="2500w" src="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/0e5bf618-d816-4b1b-a597-dba083e29f93/Desktop-Purchase_AERO_glow.png?format=2500w"> </div> </figure> <figure class="gallery-masonry-item" style="position: absolute; width: 502px; transform: translate3d(536px, 878px, 0px);" data-show="true" data-loaded="true"> <div class="gallery-masonry-item-wrapper" data-animation-role="image" style="height: 1199px; overflow: hidden;"> <img data-src="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/5335e12a-8535-4b43-8862-3566ae1f6a5d/Desktop-Purchase_AERO_Ex_glow.jpg" data-image="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/5335e12a-8535-4b43-8862-3566ae1f6a5d/Desktop-Purchase_AERO_Ex_glow.jpg" data-image-dimensions="1630x3896" data-image-focal-point="0.5,0.5" alt="Desktop-Purchase_AERO_Ex_glow.jpg" data-load="false" style="width: 100%; height: 1199px; object-position: 50% 50%; object-fit: cover;" data-parent-ratio="0.4" class="" data-image-resolution="2500w" src="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/5335e12a-8535-4b43-8862-3566ae1f6a5d/Desktop-Purchase_AERO_Ex_glow.jpg?format=2500w"> </div> </figure> </div> </div> </div> </div> </div> </div> </section>
  10. Site URL: https://www.erinncapko.com/ I'm trying to achieve the layout this girl has: https://www.irenafreitas.com/ where you have the hover overlay with the title of work, which is only in portfolio grid:overlay, but I want tit o be clickable and not lead to projects/more pictures, much like when you turn on Lightbox in Gallery, then click on a image then it brings up a bigger image then just click the prev/next arrows to sort through the images.
  11. Site URL: https://ferret-porpoise-kz74.squarespace.com/ I have used a code to create an overlay caption to appear on grid gallery images whilst hovering... however I would like for the caption to sit at the bottom of the image rather than the top (as show). Any help would be fantastic! Many thanks!
  12. Site URL: https://www.makinganexoneree.com/experts Hi, How do I get the captions on my simple gallery grid to be centered? Can't quite figure out the CSS for it. Thanks in advance! Page is here: https://www.makinganexoneree.com/experts
  13. Site URL: https://www.exceedfootwear.com Hi I am looking to change the view from 1 product per line on the iPhone to 2 per line (making the images smaller). How can I do this ASAP. Any help would be greatly appreciated
  14. 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!
  15. Site URL: https://someguystop1000albums.com So I have a site that is thumbnail gallery display pages where each thumbnail links to its own post. I have 1000 of these broken into 10 display pages that are accessed from the navigation. Recently I switched from Avenue to Brine theme to have more control over the post, like being able to shut off dates and name. With Avenue you were able to click on a thumbnail then hit the BACK ARROW on computer or BACK BUTTON on smartphone and it would bring you back to where you were on the scroll (where ever the album cover thumbnail is). Now, with Brine, it brings you to the top of the page. This is a problem, especially with smartphones, given there are a 100 thumbnails per page arranged two per row. Is there a code fix that would make Brine behave like Avenue on this point. Below are captures from a desktop and smartphone
  16. 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
  17. Currently working on a site in SQSP 7.0 and setting up images in Gallery using a simple grid with the images displaying in an aspect ratio of 1:1. I want to use images with no borders for uniformity in the gallery but have them appear in Lightbox with a white border around them so they stand out from the dark background in Lightbox when opened to their normal size. Is this something that can be achieved through the use of CSS
  18. 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!
  19. I would like to achieve masonry like gallery layout in Shop on my site using 7.1 The first image is my site now.. the second image is what I would like it to look like (that is a summary block work around which I cannot use). Can anyone help me with custom code? TIA!!!
  20. I'm trying to create this design on my website: a few icons (illustrations I will draw) with a title and text underneath. It's driving me nuts. A grid gallery doesn't display an "excerpt" or a "description" only the title. A grid summary block will show the title and excerpt but then it becomes a link (I don't want it linking anywhere). Image stacks make the photo/icon part of it way too big and I can't find a way to adjust the size of the photo/icon to make it smaller. Everyone does this like it's super simple and I can't figure out why it's seeming so complicated to do such a simple, basic thing. Any ideas??
  21. Hey all, I am wanting to find out if there is a media query or better solution that will allow me to have a Slideshow: reel for desktop only view and Grid: strips for mobile only view. Thanks in advance.
  22. Site URL: http://differentkennedy.com/apparel#/star-wars Previously worked here to gain CSS to apply a counter as thumbnails within a gallery grid so that lightbox clickthroughs were originally displayed as numbers for a cleaner layout. Recently updating the layout and would like to add more images but would like the counter to always remain at 2 digits - ie "1" is displayed as "01" while "10" remains "10" Currently the 0 appears before all numbers and I'd like to maintain a two digit counter only if possible. See image below for current display
  23. Started a new gallery section and wanted to have a transparent (or opaque) overlay on hover like in the portfolio option Here is a screenshot of where I think the code is to copy, paste and modify but really I dont know what I'm doing.
  24. Site URL: https://sprout-tuna-swnf.squarespace.com/presentation-creation I've added a grid of small images with titles underneath them. The problem is hen the title is too long, it goes into an ellipses and only shows part of it. I tried taking out the "overflow: hidden" rule, but then the titles just overlap onto one another. What I want is for the titles to go onto another line if they don't fit on one. Is that possible? The page is https://sprout-tuna-swnf.squarespace.com/presentation-creation
  25. Site URL: https://seal-burgundy-yx98.squarespace.com/ I'm hoping to have a hover effect on the images in the gallery on my landing page for Squarespace 7.1, that allows a second image to fade in. I've been able to find lots of tutorials for this for 7.0, and for image blocks and products on 7.1, but not for galleries. And I haven't been able to figure out how to set up the classes properly for this use. I'd like each image in the gallery on my landing page (currently a simple grid, which is the only simple grid gallery on the website) to show a second image on hover, and then those images would link to a page on my site when clicked. I'd only use this effect on my site's landing page (which is also the only page with a masonry grid). Ideally The links are currently set up. Ideally the hover images would be able to be uploaded using this method, but this is flexible. Site: https://seal-burgundy-yx98.squarespace.com/ Login with RobHutch Thanks!
  • Create New...