MarekS Posted November 8, 2020 Share Posted November 8, 2020 Site URL: https://www.marekslavicky.com/en/home/#shop Hi all! I want to decrease the height of the gallery section, so the images inside become smaller. I use the Gallery section Simple grid, with 3 images only (on vertical 2:3 format, which I must keep). However, they are too big to fit a desktop screen. I increased the spacing to 150, which helps a bit, but then they are too far away from each other. Any help (including CSS or code injection) would be appreciated! Thanks, Marek Link to comment
Beyondspace Posted November 8, 2020 Share Posted November 8, 2020 6 hours ago, MarekS said: Site URL: https://www.marekslavicky.com/en/home/#shop Hi all! I want to decrease the height of the gallery section, so the images inside become smaller. I use the Gallery section Simple grid, with 3 images only (on vertical 2:3 format, which I must keep). However, they are too big to fit a desktop screen. I increased the spacing to 150, which helps a bit, but then they are too far away from each other. Any help (including CSS or code injection) would be appreciated! Thanks, Marek I tried to use margin to make it smaller on various screen breakpoint @media only screen and (min-width: 600px) { section[data-section-id="5f9805d28a87cc2645835d86"] .gallery-grid-wrapper { grid-template-columns: repeat(3, 1fr) !important; } } @media only screen and (min-width: 992px) { section[data-section-id="5f9805d28a87cc2645835d86"] .gallery-grid-wrapper { grid-column-gap: .5vw !important; } } section[data-section-id="5f9805d28a87cc2645835d86"] .gallery-grid-item { margin-right: 20px; margin-left: 20px; } section[data-section-id="5f9805d28a87cc2645835d86"] .gallery-grid-item:first-child { margin-left: 40px; margin-right: 0 } section[data-section-id="5f9805d28a87cc2645835d86"] .gallery-grid-item:last-child { margin-right: 40px; margin-left: 0 } } @media only screen and (min-width: 992px) { section[data-section-id="5f9805d28a87cc2645835d86"] .gallery-grid-wrapper { grid-column-gap: .5vw !important; } section[data-section-id="5f9805d28a87cc2645835d86"] .gallery-grid-item { margin-right: 20px; margin-left: 20px; } section[data-section-id="5f9805d28a87cc2645835d86"] .gallery-grid-item:first-child { margin-left: 40px; margin-right: 0 } section[data-section-id="5f9805d28a87cc2645835d86"] .gallery-grid-item:last-child { margin-right: 40px; margin-left: 0 } } @media only screen and (min-width: 1200px) { section[data-section-id="5f9805d28a87cc2645835d86"] .gallery-grid-wrapper { grid-column-gap: 1.5vw !important; } section[data-section-id="5f9805d28a87cc2645835d86"] .gallery-grid-item { margin-right: 40px; margin-left: 40px; } section[data-section-id="5f9805d28a87cc2645835d86"] .gallery-grid-item:first-child { margin-left: 80px; margin-right: 0 } section[data-section-id="5f9805d28a87cc2645835d86"] .gallery-grid-item:last-child { margin-right: 80px; margin-left: 0 } } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
MarekS Posted November 9, 2020 Author Share Posted November 9, 2020 Wow, it works perfect! I have no idea how many requests you are handling per day, but I really appreciate your quick and great help! Thanks so much, Ba!!! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.