mhp Posted October 31, 2023 Posted October 31, 2023 Hi, Having a hard time mastering the grid system on mobile devices. I have page section that has three columns (blocks). Looks fine on the desktop view. But on Mobile devices there are large spaces at the bottom of each block. In the designer itself, it looks fine, but when saved and published, the large spaces appear. Appreciate any tips and CSS to overcome. Thanks
melody495 Posted October 31, 2023 Posted October 31, 2023 Hi, please share a link to your website. Are they 3 separate text blocks or in 1 text block? -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd When I have time, I like to help on the Forum, but if you need my full attention, please send your request here. Tools I use (affiliate links😞 📅Blog Date Format plugin (Free by BeyondSpace) ⏬Lazy Load Summary Block plugin (by Squareswebsites) 📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon) 📈SEO plugin for Squarespace (by SEOSpace) ☕ Did I help? I like coffee (Thank you)
mhp Posted October 31, 2023 Author Posted October 31, 2023 Yes, 3 separate text blocks. https://www.artraynyc.com/hair-salon-1 Thanks.
SaranyaDesigns Posted October 31, 2023 Posted October 31, 2023 Try changing to flex instead of grid for mobile? @media (max-width:767px) { .fe-653f0146fdf76728df80846c { display: flex; flex-wrap: wrap; gap: 25px; padding: 25px; } }
mhp Posted October 31, 2023 Author Posted October 31, 2023 Thanks for the response. The code provided actually increased the space by 25px. Setting to 0 leaves the original large gap. Other suggestions?
SaranyaDesigns Posted October 31, 2023 Posted October 31, 2023 (edited) @mhp try adding !important to the display: flex property, it looks like it's not overriding the grid. Once the flex property is working, you will want the padding: @media (max-width:767px) { .fe-653f0146fdf76728df80846c { display: flex !important; flex-wrap: wrap; gap: 25px; padding: 25px; } } let me know? Edited November 1, 2023 by SaranyaDesigns
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment