Only One Product Column

Hi!
I'm building a product page in 7.1

I would like there to be a single column of products.
Current options are 2, 3 or 4 columns.
is this possible or impossible?

Many thanks,
Charlie

Yes. Possible. Can you share link to product page on your site?

Thanks, tuanphan.

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

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

Brilliant.
Thanks very much tuanphan!

Thanks for this helpful fix so far - I implemented (7.1 https://www.dinnerpal.com.au/shop ),

but am looking for a way for products (will not have images - just text) to sit much closer together

(they currently are auto-scaling large due to fit inset/page)

Looking for each product to just have a regular 1 or 1.5 line space between, and then the QUICK ADD to show. 

Thank you!

Add to Page Settings > Advanced > Header

<style>
  figure.grid-image {
    display: none;
}
</style>

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

@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

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

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? 

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>

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

 

18 hours ago, MadisonNYC said:

Hello @tuanphan 

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

 

Above url doesn't work, can you share link to your site?