Large Column Spacing on Mobile

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

Hi, please share a link to your website. Are they 3 separate text blocks or in 1 text block?

Yes, 3 separate text blocks.

https://www.artraynyc.com/hair-salon-1

Thanks.

Try changing to flex instead of grid for mobile?

@media (max-width:767px) {
	.fe-653f0146fdf76728df80846c {
		display: flex;
		flex-wrap: wrap;
		gap: 25px;
		padding: 25px; 
	}
}

Thanks for the response. The code provided actually increased the space by 25px. Setting to 0 leaves the original large gap. Other suggestions?

@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?