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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...