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?

How to Change Column Grid Size of Popup by Using Custom CSS

Before we start:

  • There should not be any space between page ID and device type.
  • There should be a space between "block" and the previous definitions.
  • If you don’t specify the device type, changes will apply to all.

Sometimes codes conflict, so it’s important to add a "!important" tag at the end of your CSS code to make sure it works perfectly.

1. Create a new campaign, choose a popup, and go to Popupsmart's popup builder's "Style" step.

the style step of Popupsmart's popup builder

2. Navigate to “Advanced” and scroll down to "Custom CSS."

Advanced tab in the Style section of Popupsmart's popup builder

3. Right-click on your popup, click inspect and find “data-page-id”. After pasting it to the custom CSS window in box brackets, enter data-device-type, which is desktop, in box brackets again to target desktop only.

arrows pointing out data-page-id and block in the inspection tool of a page

4. Now, we’ll resize the popup and the blocks. In this example, we want the popup bigger and the left block to be larger than the right side. For this, we should write “min-width:900px;” and “grid-template-columns: 70% 30%;”

Optionally, you can remove the shadow below the popup by writing “box-shadow:none”.

So it will look as in the image below:

custom CSS box in the Popupsmart's popup builder

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

 
[data-page-id="79552a7a"][data-device-type='desktop']{
  min-width:900px;
  grid-template-columns: 70% 30%;
  box-shadow:none;
}

Do you have additional questions about how to add custom CSS to your popup? Contact Us!