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

[Senku]

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"

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.

[Mustafa_Ali]

hey @Senku share the URLs of your website plz

[MandasaTech]

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.