Increase vertical padding between product cards

[MaBa]

Hi, i would like to have more space between products cards. In the mobile view I have one product per raw but the space between products is too small. How can I increase it?

[oscprofessional]

Hello @MaBa 

Could you share the store URL so that I can review your it?

[MaBa]

https://571d01.myshopify.com/

The website is in the making and I want to make the change in the mobile
version

[PageFly-Richard]

Hi @MaBa 

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css ->paste bellow code in bottom of file

@media screen and (max-width: 767px){

.grid__item {

    margin-bottom: 40px !important;

}

}

Hope that my solution works for you.

Best regards,

Richard | PageFly

[MaBa]

I copied it but I see no changes yet

[PageFly-Richard]

do you mean increase the distance between these products?

[MaBa]

yes exactly

[PageFly-Richard · Accepted solution]

@MaBa 

try again with this code:

Go to Online Store->Theme->Edit code->theme.liquid->paste bellow code in tag </body>

<style>

@media screen and (max-width: 767px){

.grid__item {

    margin-bottom: 40px !important;

}

}

</style>

Please refer to this screenshot: https://prnt.sc/afpBHc_RJbvN

[oscprofessional]

Hello @MaBa 

It will be helpful if you try this code: -

Go to the Online store > Theme -> Edit Code -> Assets -> base.css ->Add CSS in this file.

@media only screen and (max-width: 768px){
.grid--1-col-tablet .grid__item {
 width: 100%
}
}

[MaBa]

I copied the code at the end of the file but cannot see any changes.