# Reduce size of close button

**URL:** <https://community.elfsight.com/t/reduce-size-of-close-button/22914>\
**Category:** Popup\
**Created:** [October 19, 2023, 2:35pm UTC](https://community.elfsight.com/t/reduce-size-of-close-button/22914 "2023-10-19T14:35:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Helga](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/helga/32/1155_2.png) [@Helga](https://community.elfsight.com/u/Helga)\
**Post date:** [October 19, 2023, 2:35pm UTC](https://community.elfsight.com/t/reduce-size-of-close-button/22914/1 "2023-10-19T14:35:23Z")

</div>

Add the code below to Custom CSS field on your [Popup](https://elfsight.com/popup-widget/) widget’s Settings tab:

```auto
.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.

---

<div class="post-metadata">

**Author:** ![Bob\_Wilson](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/bob_wilson/32/92862_2.png) [@Bob\_Wilson](https://community.elfsight.com/u/Bob_Wilson)\
**Post date:** [March 30, 2026, 12:09pm UTC](https://community.elfsight.com/t/reduce-size-of-close-button/22914/2 "2026-03-30T12:09:34Z")

</div>

@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!

---

<div class="post-metadata">

**Author:** ![Helga](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/helga/32/1155_2.png) [@Helga](https://community.elfsight.com/u/Helga)\
**Post date:** [March 30, 2026, 12:17pm UTC](https://community.elfsight.com/t/reduce-size-of-close-button/22914/3 "2026-03-30T12:17:29Z")

</div>

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

Popup close buttons stand no chance of displaying improperly now 😊