PLEASE HELP REMOVING RANDOM BLANK SPACE IN MY PRODUCT PAGE

Store Design
, , , , , , , ,

Topic summary

A user is experiencing three layout issues on their Shopify product page:

Main Issues:

  • Unwanted blank space appearing between the size picker and size chart popup button
  • Size chart popup modal displaying too wide and needs to be reduced in size
  • “Related products” section configured in theme settings but not appearing in preview

Solution Provided:
A CSS fix was offered to address the first two problems:

  • Hide the problematic element causing blank space using display: none
  • Remove margin from the modal opener
  • Reduce popup width to 40% on desktop screens (750px+)

The code should be added to the theme’s CSS file (base.css, style.css, or theme.css).

For the third issue: Suggested clearing cache and refreshing the admin page.

Status: Solution appears complete with before/after screenshots provided. User has not yet confirmed if the fix resolved all issues.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello, I need help please.

  1. There is a random blank space in my product page between the size picker and the size chart pop up (image attached) I would like to remove that space please.
  2. Is it possible to make the “SIZE CHART” pop up smaller? it is too wide.
  3. I don’t know whats happening but in my theme i have a section “related products” but its not showing on the preview. why is this?

Thank you very much!!
My website url is: jellydropsnail.com

password: lemonsherbet

pop up ideal size
pop up ideal size2880×1612 263 KB

blank space id like to remove
blank space id like to remove1132×712 29 KB

1 Like
2

Hi @dnnlucia

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.tpo_option-set-wrapper.tpo_has-option-set {
    display: none !important;
}

modal-opener.product-popup-modal__opener.quick-add-hidden {
    margin: 0 !important;
}

@media screen and (min-width: 750px) {
    modal-dialog#PopupModal-popup_dybFJy .product-popup-modal__content {
        width: 40%;
    }
}

And for the 3rd problem. Try to clear cache and restart/refresh your admin page.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like