SIZE GUIDE POPUP PADDING ISSUE IN MOBILE ONLY. PLEASE HELP.

Store Design
, , , , , , , , , , , , , , ,
1

MY SIZE GUIDE POPU IN PRODUCT PAGES HAVE THIS PADDING ISSUE IN MOBILE . PLEASE HELP ME FIX THA GAP AND ONLY SHOW THE IMAGE AREA NO WHITE GAPS.

LINK - https://78axlfc3odzqtxi3-71576191201.shopifypreview.com

PASSWORD - 678543

unnamed.jpg
unnamed.jpg1290×2796 195 KB

2

Hello @Shahil1

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width:767px){ #PopupModal-popup_33keDV modal-dialog .contents { height: 341px !important; } modal-dialog.product-popup-modal x-grid img { { height: 100% !important; } }

RESULT:

Tech_Coding_0-1735089530963.png
Tech_Coding_0-1735089530963.png316×380 43.2 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

3

didnt fix , its the same after adding the code

4

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

5

HI @Shahil1

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
body modal-dialog.product-popup-modal x-grid img {
    height: auto !important;
}
body modal-dialog.product-popup-modal > .contents {
    height: fit-content !important;
}
}

Here is the result: https://prnt.sc/_k6RCOJrI05T

I hope this helps

Best,

Daisy

6

NOT WORKING

7

FIXED IT. THANK YOU SM