Categories
active arrowAccount
active arrowGetting Started
active arrowCampaign Builder
active arrowAdvanced Design Customization
active arrowEmail Campaign Customization
active arrowSegment & Targeting
active arrowAnalytics
active arrowShopify
active arrowEmail Marketing and CRM Integrations
active arrowCan I Add Custom CSS to My Popup?
active arrowHow to Change Column Grid Size of Popup by Using Custom CSS
active arrowAdding Custom CSS to Elements
active arrowArranging Close Button Size and Position by Custom CSS
active arrowChanging the Default Padding of The Popup by Using Custom CSS
active arrowDetermining Margins and Resize Popups and Teasers by Using Custom CSS
active arrowChanging Popup Background Colors Individually
active arrowRemoving Drop Shadow from Popups with Custom CSS
active arrowHow to use Custom CSS for Customizing Gamification Elements?

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
 [data-element-id="cqwnvd5ups00"]

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

For this kind of change, you can use the code below by changing its element id:

 [data-element-id="cqwnvd5ups00"]
{
  transform: scale(1.5);
}

3. To increase the width and height of the close button, you can use width or height properties.

pointing close button

For this kind of change, you can use the code below by changing its element id:

[data-element-id="cqwnvd5ups00"]
{
  width: 90px;
}

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
[data-element-id="cqwnvd5ups00"]
{
  position: relative;
  top: 20px;
  Left: 130px
}

For this kind of change, you can use the code below by changing its element id:

positioning the close button above the popup

For this kind of change, you can use the code below by changing its element id:

[data-element-id="cqwnvd5ups00"]
{
  position: absolute;
  right: 200px;
}
💡 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!