Arranging Close Button Size and Position by Custom CSS
This guide explains how to change the close button size and position
Before we start:
- There should be a space between "block" and the previous definitions.
1. Right-click on the close button on the popup, click inspect, and copy “data-element-id” in the box brackets.
![data element id n the inspect tool](jpg/65c63d19e18628f36077aa2b_data-element-id-of-popup.jpg)
2. To increase the size of the close button, you can use “transform: scale(1.5)” with this property, you can scale the close button according to your input in the scale.
![custom css boz of the popup](jpg/65c63d439c035cd0851a6d24_transform-scale-of-popup-custom-css.jpg)
For this kind of change, you can use the code below by changing its element id:
3. To increase the width and height of the close button, you can use width or height properties.
![pointing close button](jpg/65c63d6fe18628f36077de63_close-button-width-height-of-popup.jpg)
For this kind of change, you can use the code below by changing its element id:
4. To change the position of the close button, you can use CSS's position properties. Here are 2 examples of the usage of position properties.
![positioning the close button of the popup](jpg/65c63dad8b988eed6cf08dc9_position-of-popup-custom-css.jpg)
For this kind of change, you can use the code below by changing its element id:
![positioning the close button above the popup](jpg/65c63ddbb7868bb6620799f5_upper-positioned-close-button-on-popup.jpg)
For this kind of change, you can use the code below by changing its element id:
💡 Note: Make sure your CSS is correctly formatted. Once you complete all the settings, save and publish the popup. Do not forget to turn the status toggle on to make your popup visible on your website.
Do you have additional questions about how to add custom CSS to your popup? Contact Us!