2 column grid on mobile not aligning properly

Hello! I know this topic has been addressed many times but I can't find the explanations to my issue.

I have Squarespace 7.0. I added custom css for 2-column product grid. On my laptop its fine, on the mobile, the New release section is not aligning. What am I doing wrong? Text is too long?

Code used : 

/* Homepage products 2 columns mobile */
@media screen and (max-width:640px) 
{
div#page-650a834d556c5610652818d8 .span-3 {
    width: 48% !important;
    float: left !important;
      padding: 0px !important;
}}

Thanks.

You should use flexbox instead of float, can you please provide link to your website? Then we can provide more specific code 🙂 thanks!

Hi @SaranyaDesigns. Thanks for the reply. See here : https://juliearbourdesign.com

@Vulkan101 thanks, try this custom CSS instead, you can target any of the parent rows of the column groups with this, but these are the two groups of columns I can see on your homepage:

@media (max-width:640px) {
	#yui_3_17_2_1_1698855416983_98, #yui_3_17_2_1_1698855684213_221 {
		display: flex;
		flex-wrap: wrap;
	}
}

And then if you specifically want to lock it into two columns, remove your width 50% and float left properties and add this instead:

@media (max-width:640px) {
	#yui_3_17_2_1_1698855416983_98 col, #yui_3_17_2_1_1698855684213_221 col {
		flex-basis: 50%;
	}
}

So the whole thing looks like this:

@media (max-width:640px) {
	#yui_3_17_2_1_1698855416983_98, #yui_3_17_2_1_1698855684213_221 {
		display: flex;
		flex-wrap: wrap;
	}
	#yui_3_17_2_1_1698855416983_98 col, #yui_3_17_2_1_1698855684213_221 col {
		flex-basis: 50%;
	}
}

Let me know?

Thanks although when I copy your code it doesnt work. Shows up as 1 column.

@Vulkan101 Oh whoops, my bad. Typo in the selector... this should work:

@media (max-width:640px) {
	#yui_3_17_2_1_1698855416983_98, #yui_3_17_2_1_1698855684213_221 {
		display: flex;
		flex-wrap: wrap;
	}
	#yui_3_17_2_1_1698855416983_98 .col, #yui_3_17_2_1_1698855684213_221 .col {
		flex-basis: 50%;
	}
}

Remember to remove your existing float and width properties first.