Reduce size of close button

CSS Codes Popup
1

Add the code below to Custom CSS field on your Popup widget’s Settings tab:

.global-styles, [class^="Icon__IconContainer-sc"] {
	width: 93% !important;
	height: 93% !important;
	top: 55%;
	left: 56.5%;
}

.global-styles, [class^="PopupCloseControl__PopupCloseControlContainer-sc"] {
	width: 25px;
	height: 25px;
}

You’re welcome to change the values in the code to adjust the button to your liking.

2

@Helga, I realize this post is over 2 years old, but i just came across it and it turned out to be the key to solving a related issue. My situation was that my popup was too wide on phones and it truncated the right edge, including part of the close button. Your code made the button fully visible but the right edge was still cut off. The obvious solution of course would be to make the widget narrower, but doing so caused line wrap, which spoiled the layout. After some experimentation, I ended up with the code below:

@media (max-width:480px) {
.global-styles,
[class^=“Popup__PopupInner-sc”] {
width: 98%;
height: 98%;
}
.global-styles,
[class^=“Icon__IconContainer-sc”] {
width: 95% !important;
height: 95% !important;
top: 55%;
left: 56%;
}
.global-styles,
[class^=“PopupCloseControl__PopupCloseControlContainer-sc”] {
width: 25px;
margin: 0.07em 0.07em 0 0;
height: 25px;
}
}

Problem solved!

3

Oh that’s great, thanks a ton for sharing your solution, @Bob_Wilson!!

Popup close buttons stand no chance of displaying improperly now :blush: