Hello,
On mobile, I would like less padding around my photos and description, as well as the “you may also like” section, how am I able to do this?
Thank you,
Ella.
Topic summary
A user seeks to reduce padding around product images, descriptions, and the “you may also like” section on mobile devices for their Shopify store.
Screenshots provided show:
- Excessive white space around product elements on mobile view
Solution offered:
- Use custom CSS with a media query targeting mobile screens (max-width: 768px)
- Apply reduced padding (10px) to product media wrapper, info wrapper, and product recommendations sections
- The
!importantflag ensures the custom styling overrides default theme styles
Status: A CSS code snippet has been provided, but implementation and results have not been confirmed yet.
Hi,
Hope this will help
Use css to reduce padding
CSS code example
@media screen and (max-width: 768px) {
.product__media-wrapper,
.product__info-wrapper,
.product-recommendations {
padding: 10px !important;
}
}