Remove padding from Pop-Up Block (size chart/size guide)

Store Design

Topic summary

A user wants to adjust the styling of a size chart pop-up link on their product page. They have two goals:

Primary preference: Position the size chart link inline with the “Size” label and match its font size.

Alternative solution: If inline placement isn’t feasible, reduce or remove the padding/spacing between the pop-up block and surrounding sections.

Screenshots show the current layout with noticeable spacing issues.

Proposed solutions:

  • For inline display: Add custom CSS targeting .size-chart-link with display: inline and font-size: inherit, potentially requiring HTML structure changes in theme files like product-form.liquid.
  • For padding reduction: Use browser Developer Tools to identify the pop-up container’s class/ID, then apply custom CSS to set padding and margin values to 0 or minimal amounts.

One responder requested the website URL for more specific assistance, while another offered theme-specific guidance if needed. The discussion remains open pending additional details from the original poster.

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

Ideally, I would like the pop-up link to my size chart to be on the same line and the same font size as “size”

Screenshot 2025-06-13 at 11.18.57 AM.png
Screenshot 2025-06-13 at 11.18.57 AM.png1634×628 65.8 KB

But, if that’s not possible, l’d like to remove the padding between the pop up block and the other sections, or at least reduce it.

Screenshot 2025-06-13 at 11.19.12 AM.png
Screenshot 2025-06-13 at 11.19.12 AM.png952×578 61.3 KB

1 Like
2

hey @Senku share the URLs of your website plz

3

Hi @Senku

Yes, both options are possible with a little bit of custom code.

Option 1: Display the size chart link inline with the “Size” label and match the font size

You can try adding some custom CSS to your theme. If the size chart link is already next to the size label in the HTML, you can use something like this:

.size-chart-link {
  display: inline;
  font-size: inherit;
  margin-left: 8px; /* Adjust spacing as needed */
}

If it’s not inline yet, you might need to adjust the HTML structure in your theme file (likely in product-form.liquid or a similar section) to place the link beside the “Size” label.

Option 2: Reduce or remove the padding between the size chart popup block and surrounding elements

You can inspect the block using your browser’s Developer Tools to find the class or ID applied to the popup container. Then add custom CSS like:

.size-chart-popup {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
}

You can adjust the values depending on the spacing you prefer.

Let me know which theme you’re using if you’d like more specific guidance.