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

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 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;
}
}

 

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?

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?

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

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