ec25 Posted August 25, 2023 Share Posted August 25, 2023 Noticed that on the main page in my mobile view, the column is not centered. I used the following CSS code to make two columns into one. @media (max-width: 800px) { .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } .gallery-masonry .gallery-masonry-wrapper { columns: 1; column-gap: 0; padding: 10 10px; height: auto!important; display: block!important; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; padding: 10px!important; transform: none!important; width: 100%!important; display: block; } } Here is a picture and link to my website. https://www.erinncapko.com/ Link to comment
Solution Ziggy Posted August 25, 2023 Solution Share Posted August 25, 2023 This padding highlighted yellow is causing the problem: Replace your code with this, I've swapped all padding to just bottom padding: @media (max-width: 800px) { .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } .gallery-masonry .gallery-masonry-wrapper { columns: 1; column-gap: 0; padding: 10 10px; height: auto!important; display: block!important; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; padding-bottom: 10px!important; transform: none!important; width: 100%!important; display: block; } } Hope that helps. ec25 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
ec25 Posted August 25, 2023 Author Share Posted August 25, 2023 10 hours ago, Ziggy said: This padding highlighted yellow is causing the problem: Replace your code with this, I've swapped all padding to just bottom padding: @media (max-width: 800px) { .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } .gallery-masonry .gallery-masonry-wrapper { columns: 1; column-gap: 0; padding: 10 10px; height: auto!important; display: block!important; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; padding-bottom: 10px!important; transform: none!important; width: 100%!important; display: block; } } Hope that helps. Yes it does! Thank you very much! Ziggy 1 Link to comment
Ziggy Posted August 25, 2023 Share Posted August 25, 2023 3 hours ago, ec25 said: Yes it does! Thank you very much! Great, happy to help! ec25 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? 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