How to resize the box height of the product and make it smaller?

Technical Q&A
, ,
1

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

IMG_6994.PNG
IMG_6994.PNG1125×2436 205 KB

2

Hi @kate_group , yes.

3

Assalamualaikum, @Mamdouh_USD , Please follow this steps -

  1. Go to the edit code

  2. Sayed_Safin_0-1751136469686.png
    Sayed_Safin_0-1751136469686.png1062×294 42.9 KB

  3. search for file section-main-product.css

  4. Add the given css code at the bottom of the file.

  5. 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;
  }
}
4

@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.

5

Waalaikumsalam @Sayed_Safin ,

It worked perfectly. Thank you :slightly_smiling_face:

6

@PaulNewton Thanks for the valuable suggestions.