Jump to content

Large Column Spacing on Mobile

Recommended Posts

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

Mobile-Salon.png

Link to comment
  • Replies 5
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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 Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

@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 by SaranyaDesigns
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.