Edit Padding on product page, mobile only

[Claudianicolson]

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

Thanks in advance!

[AR-Dev]

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;
}
}

[Claudianicolson]

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