How can I add more space between products on my product page?

Store Design
1

We would like our product page to have more white space in between products both vertically and horizontally. I am not sure how to edit this.

2

Hi @optipak37

Would you mind sharing your store’s URL so we can provide a solution for this?

3

https://ryan-919.myshopify.com/

password is

rileuy

4

Add the following code at the end of your theme.css file:

@media only screen and (min-width: 750px)
{
li.grid__item.grid__item--collection-template.small--one-half.medium-up--one-third {
    padding: 40px;
}
}

Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!

5

Thanks! This worked, but is there any way to spread them out and use more of the width of the page so that there is less white space on the sides too?

6

Add the following code as well then:

@media only screen and (min-width: 750px)
{
div#Collection {
    max-width: 70%;
}
}

Let me know if that works @optipak37 !

7

Does this code work for mobile