Hello all,
I want to make the box height of the product smaller.
Store URL: https://u7yeji-na.myshopify.com/ar/products/nova-water-40-plastic-bottles-x-330-ml
Topic summary
A Shopify store owner wants to reduce the product box height on mobile devices. An image shows the current layout with excessive vertical space.
Solution Provided:
- Add CSS code to the
section-main-product.cssfile - The code targets mobile screens (max-width: 749px) and sets the product media height to 32dvh with zero padding
- Original poster confirmed the solution worked successfully
Best Practice Note:
Another participant recommended using Shopify’s custom CSS settings feature instead of directly modifying theme files. This approach prevents potential theme corruption and simplifies troubleshooting if issues arise.
Status: Resolved - the CSS modification successfully reduced the product box height as requested.
Hi @kate_group , yes.
Assalamualaikum, @Mamdouh_USD , Please follow this steps -
-
Go to the edit code
-
search for file section-main-product.css
-
Add the given css code at the bottom of the file.
-
Click on save and check the preview of your store.
Thanks!
@media screen and (max-width: 749px) {
.product__modal-opener .product__media.media{
height:32dvh;
padding-top:0;
}
}
2 Likes
@Sayed_Safin use custom css settings first before recommending merchant modify code files.
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
Otherwise when a merchant inevitably messes up there theme it wont be a “simple” style it’ll be doing free theme repair work.
1 Like
Waalaikumsalam @Sayed_Safin ,
It worked perfectly. Thank you 
1 Like
@PaulNewton Thanks for the valuable suggestions.