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

Force 2 products per row on mobile

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 

Share this post


Link to post

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
On 2/28/2020 at 3:36 PM, tuanphan said:

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

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.

Share this post


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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


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

Share this post


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!

Share this post


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>

 

 

Share this post


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