How Do I Add More Spacing Above The Main Product Image On Mobile? It's Way Too Crammed.

[AntonD]

See the screenshot to see what I mean. I want to add more spacing, either below the divider bar beneath the breadcrumb, or above the main product image for mobile. Whichever gets the job done.

My website URL is: https://nextlevelartwork.com/collections/outer-space-collection/products/anomaly-framed-canvas?varia...

Thanks,
Anton

[paramSoft]

Please place this code at the end of theme.scss

@media screen and (max-width: 768px) {
.breadcrumb {
    margin: 16px 0px !important;
}
}

[AntonD]

Nah bro that made it so the spacing between the breadcrumb and the blue section up top increased

[AntonD]

What would be the code to add just a small bit of padding at the top of the main product images on mobile only?

[paramSoft · Accepted solution]

Remove the old code and replace it with my new one

@media only screen and (max-width: 768px) {
#ProductSection .grid {

margin-top: 24px !important; 

}

}

[AntonD]

Haha I found a slightly different way of doing it! Very similar to what you did though:

@media screen and (max-width: 768px) {
.product-photo-container {
    margin-top: 15px;
}
}

[paramSoft]

Can you please email me because I got message limitations here

My email: parambabla.soft@gmail.com