How to choose custom width for store page

Site URL: https://waqarm.squarespace.com

Hey everyone,

I wanted to make my store page's contents narrower, so there is a little more white space on each side. 

I would appreciate any help to achieve this.

Thank you.

On 3/31/2022 at 12:03 AM, waqarm said:

Site URL: https://waqarm.squarespace.com

Hey everyone,

I wanted to make my store page's contents narrower, so there is a little more white space on each side. 

I would appreciate any help to achieve this.

Thank you.

Hi. You mean this page? https://waqarm.squarespace.com/shop

Add to Design > Custom CSS

/* Shop page */
body.view-list .products.collection-content-wrapper {
    padding-left: 10vw;
    padding-right: 10vw;
}

11 hours ago, tuanphan said:

Hi. You mean this page? https://waqarm.squarespace.com/shop

Add to Design > Custom CSS

/* Shop page */
body.view-list .products.collection-content-wrapper {
    padding-left: 10vw;
    padding-right: 10vw;
}

 

Yes, that did it. Thank you!

@tuanphan Thanks - this works great on desktop. How do I change the left/right padding on mobile?

On 3/5/2024 at 2:17 AM, jmerrill said:

@tuanphan Thanks - this works great on desktop. How do I change the left/right padding on mobile?

Add this under

@media screen and (max-width:767px) {
body.view-list .products.collection-content-wrapper {
    padding-left: 20vw !important;
    padding-right: 20vw !important;
}
}