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

Store Design
, , , , , , , , , , , , , , ,

Topic summary

A Shopify store owner encountered padding/white gap issues with a size guide popup on mobile product pages. The popup displayed unwanted white space around the size guide image instead of showing only the image area.

Attempted Solutions:

  • Multiple CSS fixes were proposed targeting the modal dialog and image height properties
  • Solutions involved adding custom CSS to either theme.liquid (before </body> or </head> tags) or the Custom CSS section in Theme Settings
  • Initial code suggestions from Tech_Coding and AnneLuo did not resolve the issue

Resolution:
The issue was ultimately fixed, though the original poster did not specify which solution worked or if they found an alternative approach. The discussion concluded with the problem being resolved.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
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