Jump to content

Only One Product Column

Recommended Posts

13 hours ago, OnlyCharlie said:

Thanks, tuanphan.

Here's a link:
https://bluebird-prism-dm6w.squarespace.com/store
password: 77

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
.products.collection-content-wrapper .list-grid {
    grid-template-columns: repeat(1,minmax(0,1fr)) !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
  • 7 months later...
On 3/23/2021 at 6:55 PM, mostinbristol said:

Hi @tuanphan 

I am also trying to make single product columns for a client, and that CSS snippet above doesn't seem to work for me. 

Any thoughts? 

https://cyan-sepia-3e6k.squarespace.com

password: abstract

 

On 3/26/2021 at 7:32 AM, apexjade said:

@tuanphan I too would like just one column of products, but having trouble implementing the above code as well.

EDIT: It does work when viewing externally, just not in the squarespace preview editor

Can you share link to page where you added product? We can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 10 months later...
18 hours ago, DRprint said:

I have 3 stores on my site.  I would like 2 of them to have a single product, and the third to have a handful.  When i use the code above it applies to all of them.  Is there a way to split them up so they aren't all the same? 

Add code to Page Header

<style>
  @media screen and (min-width:768px) {
.products.collection-content-wrapper .list-grid {
    grid-template-columns: repeat(1,minmax(0,1fr)) !important;
}
}
</style>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Hello @tuanphan 

This code works, but how do I make the product image much smaller? Thank you!!

On 5/20/2020 at 9:30 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
.products.collection-content-wrapper .list-grid {
    grid-template-columns: repeat(1,minmax(0,1fr)) !important;
}
}

 

 

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.