Hi there,
I’ve embedded a signup form in Framer via an embed within a full-width frame. The form shows up, the height is correct, but I cannot get it to have the right width. The container (the Framer frame in this case) is set to full width. In Klaviyo, the form is set to full width too. The code (attached) seems to reflect that but somehow the form doesn’t expand… I’m at a loss - would anyone have any idea how to fix this?
Thanks!
Best answer by clement_amicaliste
Thanks
Adding CSS worked, not exactly the one you suggested, here’s what worked (with some help from ChatGPT):
<style>
/* Cap the form to 600px and center it */
.klaviyo-form-VfFtr6,
.klaviyo-form-VfFtr6 .klaviyo-form,
.klaviyo-form-VfFtr6 iframe {
width: 100% !important;
max-width: 600px !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
}
/* Mobile safety: let it go full width below 600px */
@media (max-width: 640px) {
.klaviyo-form-VfFtr6,
.klaviyo-form-VfFtr6 iframe {
max-width: 100% !important;
}
}
</style>
Thanks again!
+45Welcome to the community
Your issue may be a CSS conflict. You could try to force precedence of the Klaviyo form styling with !important to see if that resolves it by adding the following CSS:
.klaviyo-form-VffJj6 {
width: 100% !important;
max-width: none !important;
}
Hope that helps.
Regards
Andy
Thanks
Adding CSS worked, not exactly the one you suggested, here’s what worked (with some help from ChatGPT):
<style>
/* Cap the form to 600px and center it */
.klaviyo-form-VfFtr6,
.klaviyo-form-VfFtr6 .klaviyo-form,
.klaviyo-form-VfFtr6 iframe {
width: 100% !important;
max-width: 600px !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
}
/* Mobile safety: let it go full width below 600px */
@media (max-width: 640px) {
.klaviyo-form-VfFtr6,
.klaviyo-form-VfFtr6 iframe {
max-width: 100% !important;
}
}
</style>
Thanks again!
+45Hi
Pleased to hear you got a working solution! Thanks for posting back.
Have a great week.
Regards
Andy
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.