Solved

Edit Padding on product page, mobile only

Claudianicolson
Tourist
4 0 0

Hi,

On a product page, the spacing between the image and text is fine on desktop, however when viewing on mobile there is no gap and they are almost touching. 

 

Is there a way to increase the space between the bottom of the image and the product title on mobile only?

 

Link: https://qvwine.com/products/quatre-vin-red-2021

 

Screenshot 2022-02-08 at 15.21.24.pngScreenshot 2022-02-08 at 15.21.34.png

 

Thanks in advance! 

Accepted Solution (1)

AR-Dev
Shopify Partner
14 4 5

This is an accepted solution.

Yes there is, add the following CSS code to the theme scss file (Online Store -> Actions -> Edit Code -> Assets/theme.scss.liquid):

 

@media screen and (max-width: 749px) {
  .product__content-header {
    margin-top: 32px !important;

    margin-bottom: 32px !important;
  
}
}

If you found this post helpful, please Like and Accept Solution. Thank you!
Send me a private message if you want to hire me for theme customization/development, troubleshooting, etc.

View solution in original post

Replies 2 (2)

AR-Dev
Shopify Partner
14 4 5

This is an accepted solution.

Yes there is, add the following CSS code to the theme scss file (Online Store -> Actions -> Edit Code -> Assets/theme.scss.liquid):

 

@media screen and (max-width: 749px) {
  .product__content-header {
    margin-top: 32px !important;

    margin-bottom: 32px !important;
  
}
}

If you found this post helpful, please Like and Accept Solution. Thank you!
Send me a private message if you want to hire me for theme customization/development, troubleshooting, etc.
Claudianicolson
Tourist
4 0 0

@AR-Dev  - This works perfectly, thank you!