Update CSS to exclude Klaviyo forms

[houseof9]

I am having issues with my Klaviyo sign up form displaying correctly on my website all of a sudden. When l contacted Klaviyo they said I need to update my CSS to exclude Klaviyo forms.

At the bottom is a screenshot of how the form should actually look. Can anyone assist with the CCS required?

[Maximus3]

You can put this at the bottom of theme.css, base.css, or your section’s custom css

img.needsclick.go2577309498 {
  max-width: 100% !important;
  height: auto !important;
}

or in theme.liquid before the closing of the head

<style>
  img.needsclick.go2577309498 {
    max-width: 100% !important;
    height: auto !important;
  }
</style>

[tim_tairli]

The fix above, or
Alternative code you can try which is more universal (a numerical class name makes me expect it to change without warning )

.klaviyo-form img {
  max-width: 100% !important;
}

Can go into Theme Settings-> Custom CSS or at the bottom of your .CSS file (like assets/theme.css).

---

Their answer, however, is not quite satisfactory – do they imply that your developer has added a custom css rule inside Klaviyo admin?

Because the rule highlighted in their answer is loaded as part of the Klaviyo code and does not come from your Shopify theme.

Even if it was part of your Shopify theme, I’d rather expect the app to care about its CSS and encapsulate its own elements rather than asking for store theme to avoid applying to the app elements…

An app should be compatible with a theme, not other way around.

[vividusdesigns]

Please share your store URL so we can check it further.

[houseof9]

@Maximus3

img.needsclick.go2577309498 {
  max-width: 100% !important;
  height: auto !important;
}

Thank you! That seemed to only fix half of it. The section where you enter your name and email to submit the form didn’t change back to the original one.

[tim_tairli]

I would seriously recommend sorting things out on the Klaviyo side.

The stylesheet Klaviyo app adds, 532.0e7e190ea756de832333.css, contains a bunch or “resets” (rules which should reset element styling to standard basic look – often done before applying your custom code),
but it does not contain say, any styling codes for the button.

It does not make sense to try and fix those on your side – there will always be yet another element which does not look right because Klaviyo does not pass any styling you configure in Klaviyo admin.

We can come up with a fix for this particular form, but next time something new will pop out…

[devcoders]

Hi @houseof9

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

[houseof9]

Thanks, l did speak with them again and they keep telling me its due to my CSS overwriting the styling sent from Klaviyo. They said the best resolution is to set my CSS to omit Klaviyo forms. I’m not too sure how to do this.

[tim_tairli]

No, this is not what I see on your storefront.

What I would do now – get a fresh theme copy from the theme store, add your Klaviyo app blocks there and check whether the problem replicates in this theme.

You may get a clean Prestige, or even a Dawn to be 100% sure that it’s not your theme “custom code” breaking the app.

If it does replicate (and I am 95% expect that it will), then this would be a proof of the problems on the Klaviyo, not theme side.

The theme does not have to be live.
You can get a permanent preview link (if need to share it) by right-clicking the “preview” link and “copy link address” – it should look like:
https://*.myshopify.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=151493738550