Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Force 2 products per row on mobile


Dougthemug

Question

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 

Link to post
  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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-gr

13 answers to this question

Recommended Posts

  • 1
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>

 

Link to post
  • 0
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;
}
}

 

Link to post
  • 0
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

Link to post
  • 0
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!

Link to post
  • 0
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>

 

 

Link to post
  • 0

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. 

Link to post
  • 0
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?

Link to post
  • 0
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?

Link to post
  • 0

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.

 

Link to post
  • 0
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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...