REMOVE SLIDERS FROM POPUP

Store Design
, , , , ,

Topic summary

A Shopify store owner needs help removing horizontal sliders from their size guide popup and eliminating padding issues on both desktop and mobile devices. The popup currently displays unwanted scrollbars around the size guide table.

Solutions Provided:

Two community members offered CSS-based fixes:

  • DaisyVo suggested adding custom CSS through Theme Settings → Custom CSS to adjust image dimensions using height: 70vh and width: auto

  • websensepro provided a more comprehensive solution targeting the theme.css/base.css file, including:

    • Image sizing adjustments with object-fit: contain
    • Padding removal from grid cells
    • Overflow hidden property

Current Status:

The desktop slider issue appears addressed, but mobile spacing problems persist. The user shared a screenshot showing unwanted white space on mobile and provided updated store credentials for further troubleshooting. The discussion remains ongoing as the mobile layout still requires refinement.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Please help me to remove the marked sliders from my size guide popup. i want the size guide popu to be displayed without any padding issue or sliders in both pc and mobile. he mobile has slider below the table as well. please help me.

SILIDE.png
SILIDE.png367×262 7.72 KB

SIZE GUIDE.png
SIZE GUIDE.png558×770 29.4 KB

store - https://mbzt3gy93rhf9zaf-71576191201.shopifypreview.com

password - closed

2

Hi @Shahil1

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

modal-dialog.product-popup-modal x-grid img {
    height: 70vh !important;
    width: auto !important;
}

image (47).png
image (47).png1819×810 100 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

3

Hi @Shahil1

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
modal-dialog.product-popup-modal x-grid img {
    object-fit: contain;
    height: 69.5vh !important;
    width: auto !important;
    margin: auto !important;
    overflow: hidden !important;
}
modal-dialog .contents>x-grid>x-cell {
    padding: 0 !important;
}

Result:

websensepro_0-1734962283594.png
websensepro_0-1734962283594.png1001×491 38.9 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

4

hi please help me remove these spaces from mobile .

unnamed.jpg
unnamed.jpg1290×2796 195 KB

5

Will you share the link with me again? Your link has expired.

6

https://aasjgec36p0u65zp-71576191201.shopifypreview.com

Password - 678543