MaryLou Posted July 8 Share Posted July 8 Hi, I am trying to make this gallery/ grid stacked for mobile view only. Could someone please help? 🙂 And please see the attached photo! Thank you in advance https://dcr-venue.squarespace.com/ password: DCRwedding Link to comment
Solution Lesum Posted July 8 Solution Share Posted July 8 @MaryLou Hi! You can add this code under Website > Pages > website Tools > Custom CSS to display the gallery/grid stacked for mobile view only. @media screen and (max-width: 767px) { #block-da41cb6d68adf52857fb .sqs-gallery-block-grid .sqs-gallery-design-grid { display: flex !important; flex-direction: column; justify-content: center; align-content: center; flex-wrap: wrap; } }  If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
MaryLou Posted July 8 Author Share Posted July 8 @lesum yay!! Thank you very much! Is there any way to bring the images closer together? it now has a lot of white space.  Thanks! Link to comment
Lesum Posted July 8 Share Posted July 8 (edited) @MaryLou Add this code to reduce the space between the images: @media screen and (max-width: 767px) { #block-da41cb6d68adf52857fb .slide.sqs-gallery-design-grid-slide { position: relative; } #block-da41cb6d68adf52857fb .sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor { padding-bottom: 0 !important; height: 100% !important; } #block-da41cb6d68adf52857fb .sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor img { top: unset !important; width: 100% !important; height: 100% !important; left: unset !important; } }  Edited July 8 by Lesum Updated Code MaryLou 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Lesum Posted July 8 Share Posted July 8 @MaryLou I just updated the code in my last comment; I forgot to add a few lines while I was adding the code. MaryLou 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment