How can I adjust the popup size and remove white space in my size chart?

[Ben_10]

Hi All,

This is my size chart in Motion Theme. I used the editor to insert the image and made the size to the original size but when I save it and have a look at it on my site it seems that it is still too small although in the actual editor it looks much bigger. No matter how much bigger I make the image this just seems to be the max popup size for the chart. I would like to make the popup bigger when people click the size chart, please let me know how I can do so?

Then secondly, the white space between the red boxes, how can I get rid of that so my image stretches out in full?

[Zeel-prajapatii · Accepted solution]

Hey @Ben_10 please add the below css to your theme.css file.

tool-tip[data-tool-tip-open=true] .tool-tip__inner {
    max-width: 850px;
    min-height: 350px;
    min-width: 350px;
    padding: 0px;
}
.tool-tip__close {
    padding: 1px;
}

Thanks

[Zeel-prajapatii]

Hey @Ben_10 Could you please give your website URL? It will make it much easier for me to address your problem.

Thanks

[Ben_10]

Hi Zeel-Prajapatii,

I just removed the password to make the site live as it is not yet completed, please see link directly to the product page - https://www.grably.art/products/prehistoric-musing-i?variant=47628837126474

Once you click 'MEDIUM DETAILS & SIZE CHART' you will see the size issue plus the white spacing I assume is to do with the popup code.

[Zeel-prajapatii]

Hey @Ben_10 I'm not able to see any size chart image in the popup. could you please upload the image again so i can get the better idea for the size and spacing. https://prnt.sc/f_T9SU2l7-tS 

Thanks

[Ben_10]

That is a bit strange as it works on my side. I deleted the image, then saved. Then re-uploaded it now and saved. Working my side, please let me know if you see it now.

[Zeel-prajapatii · Accepted solution]

Hey @Ben_10 please add the below css to your theme.css file.

tool-tip[data-tool-tip-open=true] .tool-tip__inner {
    max-width: 850px;
    min-height: 350px;
    min-width: 350px;
    padding: 0px;
}
.tool-tip__close {
    padding: 1px;
}

Thanks

[Ben_10]

Wow Zeel-Prajapatii thank you so much, this is great, the white borders are gone! The zoom issue is still there though as I would like the overall popup for the chart to be roughly 50% bigger, can you assist with that? Sorry I see replied in the wrong place at first.

[EquiZone]

Hi there, you seem to be the person to contact about this! On our mobile site we cannot zoom in on the size charts, so they are too small for the customer to read, even through they're perfect on the PC website. Is there a way to allow zoom? Here is an example product - https://equizoneonline.com/products/2-5-ring-eggbutt-leather and then click on "Size Guide" for the pop up. 

[Ben_10]

Wow Zeel-Prajapatii thank you so much, this is great, the white borders are gone! The zoom issue is still there though as I would like the overall popup for the chart to be roughly 50% bigger, can you assist with that?

[Zeel-prajapatii · Accepted solution]

@Ben_10 please change the max-width to 1250px; refer the below screenshot.

Thanks

[Ben_10]

Thank you so much! It is perfect now

[MRamzan]

You can try this method: