Force 2 products per row on mobile

Hi!

In order to have add to cart buttons on my product page, I have added multiple products individually using Product Block. When I view the site on mobile, it automatically changes to 1 per row. How can I force it to 2 product blocks per row?

Thanks in advance,

Doug 

Can you share link to products? Maybe some custom CSS can solve

54 minutes ago, LXK said:

Hi Tuanphan!

Was this solved? I would also really appreciate some guidance with this. 

I would like to force the mobile product to x2 items per row.

https://cbhd-dev-9ac7.squarespace.com/shop
PW: New-Dev!

Thanks you.

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}

4 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}

 

Hi Tuanphan!

Thanks so much for getting back to me on this. 

I'm afraid nothing's changed on the mobile layout after adding to Custom CSS.

This is for 7.1 right? Is there something I'm not doing correctly?

Thanks again

15 hours ago, LXK said:

Hi Tuanphan!

Thanks so much for getting back to me on this. 

I'm afraid nothing's changed on the mobile layout after adding to Custom CSS.

This is for 7.1 right? Is there something I'm not doing correctly?

Thanks again

Remove code I sent, add this to Home > Settings > Advanced > code Injection > Header

<style>
  @media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}
</style>

1 hour ago, tuanphan said:

<style> @media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-column-gap: 5px; grid-row-gap: 5px; } } </style>

This works.
Tuanphan, you're a genius. Thank you!

On 5/18/2020 at 9:30 AM, tuanphan said:

Hi tuanphan,

That worked great for my product pages however could I use a similar piece of code for the featured grids which I use on certain pages to include products on a central page from various shop pages I have. The featured grid of items still appear full width on mobile compared to the 2 products per row which worked great on the shop pages on mobile. 

Thanks for your great fix there !

On 5/18/2020 at 9:30 AM, tuanphan said:

 

 

Remove code I sent, add this to Home > Settings > Advanced > code Injection > Header

<style>
  @media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}
</style>

 

Hi everyone!

I am looking for the same result for mobile view. Instead of product pages I use blank page with images and text. 

Can anyone please help me with the coding?

Here are the link on the pages. 

main product view page https://cossetceramics.com/ceramics

individual product page https://cossetceramics.com/maya

Will greatly appreciate your help. 

On 9/23/2020 at 7:58 AM, Tatsiana said:

Hi everyone!

 

I am looking for the same result for mobile view. Instead of product pages I use blank page with images and text. 

Can anyone please help me with the coding?

 

Here are the link on the pages. 

main product view page https://cossetceramics.com/ceramics

individual product page https://cossetceramics.com/maya

 

Will greatly appreciate your help. 

Hi. I see you solved. Do you still need help on this?

Hello,

I'm looking to do the same, however I'm using a standard product page (no black page and adding product block, not sure if that makes a difference). Tried all the codes here in CSS to no avail, using the Wells template, any help at all would be greatly appreciated, thanks !

My site for context: https://www.seanmundyphotography.com/shop

11 hours ago, seanmundy said:

Hello,

I'm looking to do the same, however I'm using a standard product page (no black page and adding product block, not sure if that makes a difference). Tried all the codes here in CSS to no avail, using the Wells template, any help at all would be greatly appreciated, thanks !

My site for context: https://www.seanmundyphotography.com/shop

I see 2 products here. Do you still need help?

Hey,

I added the CSS codes into the custom CSS field and nothing changed, none of the two above worked on my end. 

Trying to force 2 products in one row on the mobile page.

12 hours ago, Juelz said:

Hey,

I added the CSS codes into the custom CSS field and nothing changed, none of the two above worked on my end. 

Trying to force 2 products in one row on the mobile page.

 

Can you share site url? We can help easier

On 2/19/2021 at 3:09 PM, tuanphan said:

Can you share site url? We can help easier

https://terrier-cow-em9s.squarespace.com
PW: ZZZZJJJJ

Thank you!

Hi all,

I am also having a similar issue on our site. Tried adding that code and it still doesn't add the two products per site.

https://www.periodicoemporium.com/

I can't figure out what I am doing wrong.

21 hours ago, PeriodicoEmporium said:

Hi all,

I am also having a similar issue on our site. Tried adding that code and it still doesn't add the two products per site.

https://www.periodicoemporium.com/

I can't figure out what I am doing wrong.

You mean 4 items under search bar?

Thank you for replying. Yeah, I would like the four items under the search bar on the Home Page to appear as two on a page on mobile view. At the moment it is just one and you have to scroll down all four options as the homepage is not product page.

On 7/30/2021 at 7:35 PM, PeriodicoEmporium said:

Thank you for replying. Yeah, I would like the four items under the search bar on the Home Page to appear as two on a page on mobile view. At the moment it is just one and you have to scroll down all four options as the homepage is not product page.

It looks like you fixed this?