Jump to content

Squarespace 7.1, how to make the product list show 2 columns on mobile view instead of 1...solved.

Recommended Posts

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

On mobile view, the product grid will now show 2 columns instead of 1. You can change this to show more on mobile by changing "repeat(4,minmax(0,1fr))".  If you turn your phone sideways and want 4 columns, you can adjust the max width for when the phone is sideways and create another css for when the phone is vertical.

Link to comment
On 12/19/2020 at 8:03 PM, MiridiosII said:

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

On mobile view, the product grid will now show 2 columns instead of 1. You can change this to show more on mobile by changing "repeat(4,minmax(0,1fr))".  If you turn your phone sideways and want 4 columns, you can adjust the max width for when the phone is sideways and create another css for when the phone is vertical.

Im still having issues displaying the product grid to show more than 2 columns instead of 1 using the code above.  Will this work for only certain styles provided by squarespace? 

 

Link to comment
  • 2 weeks later...
On 12/24/2020 at 4:20 AM, SMXTH said:

Im still having issues displaying the product grid to show more than 2 columns instead of 1 using the code above.  Will this work for only certain styles provided by squarespace? 

 

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
On 12/23/2020 at 9:20 PM, SMXTH said:

Im still having issues displaying the product grid to show more than 2 columns instead of 1 using the code above.  Will this work for only certain styles provided by squarespace? 

 

Hello! I'd also like to solve this, i'm in the early stages of creating my site and currently on mobile it shows 1 product at a time stacked. When I enter the code nothing changes. My site is: www.sundayclubapparel.com thank you!

Link to comment
On 1/8/2021 at 10:29 PM, sundayclubapparel said:

Hello! I'd also like to solve this, i'm in the early stages of creating my site and currently on mobile it shows 1 product at a time stacked. When I enter the code nothing changes. My site is: www.sundayclubapparel.com thank you!

Add to Settings > Advanced > Code Injection > Header

<style>
  /* Product 2 columns mobile */
@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: 10px;
}
}
</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
  • 1 year later...

Hi @tuanphan! Thanks so much for all your help in this forum. 
I have tried using all the snippets I could find in these forums to create a two column layout in mobile and my shop seems to be behaving differently than others. The images appear too small when they're in two columns (see attached photo). When the page first loads they're actually the correct size for a second and then pop back into the small mode. I have tried removing ALL of the other custom CSS on my site and isolating the code you provided but the issue still persists. Could there be a setting in Squarespace 7.1 that is causing it to reformat to smaller or do I need to use a different snippet of code?

My temporary URL is https://keyboard-heron-fz8p.squarespace.com/
Site password: testing

Thanks so much for your help!

Maya

Screenshot 2022-05-16 at 7.26.30 AM.jpeg

Link to comment
On 5/16/2022 at 9:39 PM, mayasommer said:

Hi @tuanphan! Thanks so much for all your help in this forum. 
I have tried using all the snippets I could find in these forums to create a two column layout in mobile and my shop seems to be behaving differently than others. The images appear too small when they're in two columns (see attached photo). When the page first loads they're actually the correct size for a second and then pop back into the small mode. I have tried removing ALL of the other custom CSS on my site and isolating the code you provided but the issue still persists. Could there be a setting in Squarespace 7.1 that is causing it to reformat to smaller or do I need to use a different snippet of code?

My temporary URL is https://keyboard-heron-fz8p.squarespace.com/
Site password: testing

Thanks so much for your help!

Maya

Screenshot 2022-05-16 at 7.26.30 AM.jpeg

Try adding this to Design > Custom CSS

/* Product 2 columns mobile */
@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: 10px;
}
}

 

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
  • 9 months later...
On 3/8/2023 at 3:30 AM, aoifebee said:

Im having the same problem, could you please guide me?

https://www.aoifedeburcajewellery.com/

This code should work for your site & all templates in 7.1 version

/* Product 2 columns mobile */
@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: 10px;
}
}

 

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
  • 1 month later...
On 5/8/2023 at 4:28 AM, imagineifnyc said:

Hi tuanphan

Im having the same issue and tried the code above today but on mobile Im getting no results. Can you guide me to any errors in my code on this? Thanks 🙂

https://www.imagineifnyc.com

 

IMG_DF2D609F73F3-1.jpeg

You are using new editor on homepage, so you can edit page > Click Mobile icon on top right > Then you can drag items to make 2 columns > then save > this won't affect on desktop

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
  • 2 weeks later...
On 5/9/2023 at 4:03 AM, tuanphan said:

You are using new editor on homepage, so you can edit page > Click Mobile icon on top right > Then you can drag items to make 2 columns > then save > this won't affect on desktop

Thanks tuznphan going to try this now. 

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.