Mobile Product showing in 2 columns

I'm trying to make the product list on the mobile split into two columns instead of one. I'll tried code I see online but it doesn't work. Please help me. thank you

@Essentialsbymhd Would it be possible to share your site URL so I can take a look? Thanks!

https://www.essentialsbymhd.com/

@Essentialsbymhd 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;
	}
	.products .grid-item {
		width: 100% !important;
	}
}

@Essentialsbymhd What's the URL of this page? I'm seeing products are now displaying in two column on mobile. Please check on your browser or reload your Squarespace editor. 

You are right! its actually working on my phone as well. Not sure why its showing like that on my edit page. But as long as it works! Thank you so much! btw another quick question. is there a way to apply search bar to product pages without having to add it manually into each one? for now I have it in the footer as that would apply to all. 

@Essentialsbymhd Unfortunately, it's not possible with Squarespace's native functionality. As of now, we can only add search bar manually on product pages. 

Anyone know why all of a sudden my products on mobile are stuck inset? Even if I toggle to FULL it does nothing. So frustrating! This just happened one day and no matter if I do 1 column or 2 it will not project them as full size in the screen. As you can see in the single column example the products are aligned to the left....

I am thinking there was an update to mobile format and this is a bug!?

12 hours ago, Shyla said:

Anyone know why all of a sudden my products on mobile are stuck inset? Even if I toggle to FULL it does nothing. So frustrating! This just happened one day

Squarespace 7.1 didn't have a 2-column option until recently, so it looks like you may have added some Custom CSS to display the Store page using two columns. They've just added this feature and, in doing so, they changed the way the page was built and this will have 'broken' the outdated CSS and caused unwanted effects like this. You should be able to resolve this by removing the outdated CSS and then using the built-in setting to choose the number of columns.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi! A long while ago, I found code to make it so my products would appear in two columns instead of just one on mobile. For some reason, the product page is now displaying them still in two columns— just completely bypassing the second column. I haven't made any conscious changes to the code, so I have no clue what happened. Any help for this fix would be greatly appreciated.

LOL Thank you for reminding me I had custom CSS installed for this to function prior to the standard version offering this. I have it all fixed now 🙂

On 9/25/2023 at 11:30 AM, cloudhymns said:

Hi! A long while ago, I found code to make it so my products would appear in two columns instead of just one on mobile. For some reason, the product page is now displaying them still in two columns— just completely bypassing the second column. I haven't made any conscious changes to the code, so I have no clue what happened. Any help for this fix would be greatly appreciated.

 

Just get rid of the custom CSS, they have made the 2 column layout a standard feature now when you edit the section.