djcdubz Posted December 5, 2023 Share Posted December 5, 2023 site: www.havenandhomedesign.com pass: havenandhome In the Gallery section of my site, I am using a portfolio layout (and grid:strips specifically for the images). Initially, on mobile, it was not displaying images in a single column, but rather a mix of one and two columns. I have forced the images to display in one column using this code: @media (max-width: 640px) { .gallery-strips .gallery-strips-item img { height: 100%!important; width: 100%!important; } .gallery-strips .gallery-strips-wrapper { columns: 1; column-gap: 0; padding: 0 0px; height: auto!important; display: block!important; } .gallery-strips-item-wrapper { height: auto!important; } .gallery-strips-item { position: relative!important; padding: 10px!important; transform: none!important; width: 100%!important; display: block; } } This fixed the problem, but it created a separate one. Now the images are not centered on the screen (the padding to the right of the image is smaller than the padding to the left, skewing the images to the right). How do I fix this and recenter the images? Thanks in advance for the help. Ziggy 1 Link to comment
Ziggy Posted December 5, 2023 Share Posted December 5, 2023 Can you try adding this property: margin:auto; 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! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (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
djcdubz Posted December 6, 2023 Author Share Posted December 6, 2023 5 hours ago, Ziggy said: Can you try adding this property: margin:auto; Where in the code would I place this? Ziggy 1 Link to comment
Ziggy Posted December 6, 2023 Share Posted December 6, 2023 5 hours ago, djcdubz said: Where in the code would I place this? Within this: .gallery-strips .gallery-strips-wrapper { } But I can't actually see the problem when I view your gallery page. 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! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (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
djcdubz Posted December 6, 2023 Author Share Posted December 6, 2023 6 hours ago, Ziggy said: Within this: .gallery-strips .gallery-strips-wrapper { } But I can't actually see the problem when I view your gallery page. I should have been more specific. When you click on the gallery page, look specifically at one of the projects and you'll see it there. It'll look like this: The images are pushed up against the right side of the screen more so than the left. Also, tried the code, didn't change anything. Link to comment
Solution JayVanDyke Posted December 6, 2023 Solution Share Posted December 6, 2023 try changing padding: 10px !important; to this padding: 10px 0 !important; in your .gallery-strips-item code ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs 🛠️ Web Designer's Toolkit **some of these contain affiliate links Link to comment
djcdubz Posted December 6, 2023 Author Share Posted December 6, 2023 3 hours ago, jaeveedee said: try changing padding: 10px !important; to this padding: 10px 0 !important; in your .gallery-strips-item code Genius. This worked! Thanks. 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