Jump to content

Two Columns on Mobile Shop No Longer Working

Recommended Posts

I have been using this CSS for years on my site to give my shop two columns on mobile:

@media only screen and (max-width:767px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item { width: 48%;
}
}

This morning I opened my site, and the products are still half as large but displaying in only one column off to the side. What can I do about this? I'm temporarily removing any CSS because I don't want my site to look funky.

Also, since discovering the issue I have tried multiple different CSS codes to make two columns and all of them do this or don't work at all. 

Screenshot 2023-09-09 at 9.28.28 AM.png

Edited by AnnaCanArt
More information
Link to comment

@AnnaCanArt You can try adding this code snippet under Custom CSS panel:

@media only screen and (max-width: 767px) {
	.products.collection-content-wrapper .list-grid {
		grid-template-columns: repeat(2,minmax(0,1fr)) !important;
	}
}

Let me know if it works. Thank you! 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Jil3987 The code I provided in my previous comment has been proven effective in resolving a similar issue faced by another user. To ensure the code is correctly implemented for your specific situation, could you please share the URL of your website?

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

As a note to anyone wanting a 2-column grid on their mobile product page, this feature has been added to the store section settings. You can find it by editing the store section and toggling the mobile view:

image.thumb.png.0dd0596dc5fb82519688f6cd616d55d8.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 months later...

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.