Your live website popup is being distorted because your website’s CSS is overriding Klaviyo’s font sizes, line-height, padding, and container width.

Look at the differences:

• The headline is much larger on your live site

• The spacing between elements is different

• The banner edges are cropped because the container width is being changed

• The internal padding is being overridden

• The button is stretched wider than intended

This is 100% caused by global theme CSS from your website, NOT Klaviyo.

This is extremely common with Shopify and WordPress themes.

The Fix: Add CSS Isolation So Your Theme Can’t Override Klaviyo Styles

Add the following CSS to your website:

CSS Patch (use this on Shopify “theme.css” or WordPress “additional CSS”):

/* Prevent theme CSS from overriding Klaviyo popup styles

*/ .klaviyo-form * { all: revert !important; font-family: inherit !important; box-sizing: border-box !important; } /* Fix popup width and padding issues */ .klaviyo-form { max-width: none !important; width: auto !important; padding: revert !important; }

This does 3 things:

1️⃣ Resets all Klaviyo popup elements back to their original design

Your theme can no longer override headline size, spacing, etc.

2️⃣ Prevents global typography rules from resizing your popup text

Many themes apply global rules like
h1 { font-size: 48px !important; }
which breaks Klaviyo popups.

3️⃣ Fixes container width issues so the design is not squeezed or stretched

🔍 Why this happens

Most website themes include global CSS such as:

body * { font-size: 20px; line-height: 1.4; padding: 0; margin: 0; }

This affects Klaviyo popups unless you isolate them.

Klaviyo preview looks perfect because Klaviyo preview is not affected by your theme.

Your live site changes it because your theme overrides it using !important.

If you tell me your platform (Shopify / WordPress / Wix), I will give you:

• Exact place to paste this CSS

• Your theme-safe version

• Optional optimized version for speed

Hi Talha - thank you for this thorough response. We use Shopify. It’d be great if you could provide the exact CSS directions. Thank you!

​@cbzhu 

Sure Where to paste the Klaviyo CSS in Shopify

1. Go to Online Store → Themes → Edit code

2. Open your main CSS file:

   • assets/base.css (most common)

   • or theme.css / styles.css

3. Scroll to the bottom of the file.

4. Paste this code:

/* Klaviyo popup fix */
.klaviyo-form * {
  all: revert !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

.klaviyo-form {
  max-width: none !important;
  width: auto !important;
  padding: revert !important;
}

That’s it.. your Klaviyo popup will render correctly again.