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

Solved
Excursionist
31 0 4

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.

spacing 2.png

 

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

Thanks,
Anton

0 Likes
Shopify Partner
1116 181 456

Please place this code at the end of theme.scss

@media screen and (max-width: 768px) {
.breadcrumb {
    margin: 16px 0px !important;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
Excursionist
31 0 4

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

0 Likes
Excursionist
31 0 4

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

0 Likes
Shopify Partner
1116 181 456

This is an 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

}

}

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
Excursionist
31 0 4

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;
}
}
0 Likes
Shopify Partner
1116 181 456

Can you please email me because I got message limitations here

My email: parambabla.soft@gmail.com

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com