Increase space between products and left border

[ChrisM187]

Hello, I am trying to increase the padding / distance between the far left product and the end of the browser screen, aswell as the spacing between the products perhaps.

 

I am unsure how to do it.
I am using the Dawn Theme!

Thank you in advance!

[BSS-TekLabs]

Hello @ChrisM187 
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

[ChrisM187]

Hello, my shop URL is: https://trinitysneakers.com/
thank you in advance!

[BSS-TekLabs]

- Here is the solution for you @ChrisM187 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
@media only screen and (min-width: 600px) {
.card.card--standard.card--media {
    padding: 0px 5px !important;
}
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSS-TekLabs]

Increase 5px to a larger number if you want more spacing @ChrisM187 .

[ChrisM187]

Thank you, that helped! But is it possible to have a different space from the left border and a separate space between the products themselves?

[BSS-TekLabs]

<style>
@media only screen and (min-width: 600px) {
.card.card--standard.card--media {
    padding: 0px 10px !important;
}
.grid {
        margin-left: 40px !important;
    }
}
</style>

You can try this code @ChrisM187 

[ChrisM187]

Great! Thank you very much!
Now the right border does not have the same distance to the far right product as the left side, is it possible to somehow change that aswell?
I'm apologize for the many questions..

[BSS-TekLabs · Accepted solution]

<style>
@media only screen and (min-width: 600px) {
.card.card--standard.card--media {
    padding: 0px 10px !important;
}
.grid {
        margin-left: 40px !important;
margin-right: 40px !important;
    }
}
</style>

Please repalce to this code @ChrisM187 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[ChrisM187]

This is perfect!  Thank you very much for all the help!

[BSS-TekLabs]

Glad to help you. Have a good day @ChrisM187 .

[Moeed]

Hey @ChrisM187 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.grid {
    margin-left: 100px;
    gap: 3rem !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[ChrisM187]

Thank you for your reply, but now i have the problem that the products are showing weirdly and not in a sorted way. i tried playing around with the 100px but it didnt change much.