Show/hide interaction renders icon bigger than expected

Hi everyone,

I implemented a show/hide interaction for a FAQ section. The plus icon turns into a minus sign when clicked and the other way around on second click. On preview everything looks fine. However, when publishing the site the plus sign is much bigger than the minus sign, even though I gave both icons the same size (3% of the div block they’re in).
I’m not sure why this is happening and how I can get both icons to stay the same size.

Here access to the webflow page:

https://preview.webflow.com/preview/pest-control-lp-93fa1ec4c5a1fbc65f2e910?utm_medium=preview_link&utm_source=designer&utm_content=pest-control-lp-93fa1ec4c5a1fbc65f2e910&preview=66be3a135c652cefe10e2e0b6aa37ec1&pageId=60ed78bed98c8127d13e3679&itemId=610ab3f9cbf75e57aec53be3&workflow=preview

Thanks

Michael

Hey @MichaelLausberg , I would not use % as it is calculated on the size of it’s parent. if the - sign was bigger by default, the div would enlarge to hold it and then adding the 3%, it would now calculate based on the bigger div size.

I would recommend using px value so it would be the same always.