# Popup
**URL:** https://community.elfsight.com/c/css-codes/popup/165.md
[Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md)
---
## [Reduce popup on mobile](https://community.elfsight.com/t/reduce-popup-on-mobile/23372)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\
**Replies:** 2\
**Last updated:** [April 10, 2026, 11:04am UTC](https://community.elfsight.com/t/reduce-popup-on-mobile/23372 "2026-04-10T11:04:53Z")
Add the code below to Custom CSS field on your Popup widget’s Settings tab: @media(max-width: 500px){ .global-styles, \[class\*="LayoutSlideIn\_\_ModalContent-sc"\], \[class\*="Popup\_\_PopupCloseInsideInner-sc"\] { transform…
---
## [Reduce size of close button](https://community.elfsight.com/t/reduce-size-of-close-button/22914)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\
**Replies:** 2\
**Last updated:** [March 30, 2026, 12:17pm UTC](https://community.elfsight.com/t/reduce-size-of-close-button/22914 "2026-03-30T12:17:29Z")
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…
---
## [Add border to the popup container](https://community.elfsight.com/t/add-border-to-the-popup-container/143263)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [January 19, 2026, 10:32am UTC](https://community.elfsight.com/t/add-border-to-the-popup-container/143263 "2026-01-19T10:32:53Z")
Add the code below to Custom CSS field on your Popup widget’s Settings tab: .es-widget-background-container { border: 2px solid #3a86ff; }
---
## [Reduce Reopen button size on mobile](https://community.elfsight.com/t/reduce-reopen-button-size-on-mobile/23371)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\
**Replies:** 3\
**Last updated:** [September 25, 2025, 7:02pm UTC](https://community.elfsight.com/t/reduce-reopen-button-size-on-mobile/23371 "2025-09-25T19:02:41Z")
Add the code below to Custom CSS field on your Popup widget’s Settings tab: @media(max-width: 500px) { .global-styles, \[class^="FloatingButton\_\_FloatingButtonContainer"\] { transform: rotate(270deg) translateX(50px) …
---
## [Change color of Error Messages in Form block](https://community.elfsight.com/t/change-color-of-error-messages-in-form-block/62995)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [July 25, 2024, 6:42pm UTC](https://community.elfsight.com/t/change-color-of-error-messages-in-form-block/62995 "2024-07-25T18:42:01Z")
Add the code below to Custom CSS field on your Popup widget’s Settings tab: .global-styles, \[class^="FormFieldLayout\_\_Error-sc"\], \[class^="Layout\_\_Error-sc-1ym496i-0"\] { color: white !important; }
---
## [Change width, height and font size of the Reopen button](https://community.elfsight.com/t/change-width-height-and-font-size-of-the-reopen-button/62997)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [July 25, 2024, 6:46pm UTC](https://community.elfsight.com/t/change-width-height-and-font-size-of-the-reopen-button/62997 "2024-07-25T18:46:46Z")
Add the code below to Custom CSS field on your Popup widget’s Settings tab: .global-styles, \[class^="ButtonBase\_\_ButtonContainer"\] { width: 20px; height: 50px; font-size: 20px !important; }
---
## [Change background color of the specific popup block](https://community.elfsight.com/t/change-background-color-of-the-specific-popup-block/62991)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [July 25, 2024, 6:36pm UTC](https://community.elfsight.com/t/change-background-color-of-the-specific-popup-block/62991 "2024-07-25T18:36:59Z")
Add the code below to Custom CSS field on your Popup widget’s Settings tab: \[class\*="Block\_\_BaseBlock-sc"\]:nth-child(1) { background-color: rgb(0,0,0) !important; } In brackets, nth-child(1) set the number of the req…
---
## [Adjust padding of the popup blocks](https://community.elfsight.com/t/adjust-padding-of-the-popup-blocks/62990)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [July 25, 2024, 6:35pm UTC](https://community.elfsight.com/t/adjust-padding-of-the-popup-blocks/62990 "2024-07-25T18:35:09Z")
Add the code below to Custom CSS field on your Popup widget’s Settings tab: \[class\*="Block\_\_BaseBlock-sc"\]:nth-child(1) { padding: 0px 0px; } In brackets, nth-child(1) set the number of the required block (counting f…
---
## [Increase size of the Reopen button only for desktop](https://community.elfsight.com/t/increase-size-of-the-reopen-button-only-for-desktop/62987)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [July 25, 2024, 6:27pm UTC](https://community.elfsight.com/t/increase-size-of-the-reopen-button-only-for-desktop/62987 "2024-07-25T18:27:48Z")
Add the code below to Custom CSS field on your Popup widget’s Settings tab: @media (min-width: 768px) { .global-styles, \[class\*="FloatingButton\_\_FloatingButtonContainer-sc"\] \[class\*="ButtonBase\_\_ButtonContainer-sc"\] { t…
---
## [Change font for all elements (Popup)](https://community.elfsight.com/t/change-font-for-all-elements-popup/22907)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\
**Replies:** 0\
**Last updated:** [October 19, 2023, 2:08pm UTC](https://community.elfsight.com/t/change-font-for-all-elements-popup/22907 "2023-10-19T14:08:01Z")
Add the code below to Custom CSS field on your Popup widget’s Settings tab: .global-styles, \[class^='Block\_\_BaseBlock'\] { font-family: Calibri !important; } You’re welcome to set any other font, providing it is suppor…