How can I adjust the width of an embedded form on my webpage?

[shopthriae]

Greetings, I have an embedded form for potential customers to subscribe to my site's newsletter - made through Klaviyo. The link is https://shopthriae.com/pages/subscribe - the width of the form is a bit much, is there a way for me to limit the width so it does not look so bizarre?

[diego_ezfy · Accepted solution]

@shopthriae 

Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.template-page [class^='klaviyo-form'] {
    padding-left: 55px;
    padding-right: 55px;
}

@media only screen and (max-width: 749px) {
    .template-page [class^='klaviyo-form'] {
        padding-left: 22px;
        padding-right: 22px;
    }
}

.template-page [class^='klaviyo-form'] {
    *zoom: 1; max-width: 1200px;
    margin: 0 auto;
}

.template-page [class^='klaviyo-form']::after {
    content: '';
    display: table;
    clear: both;
}

Please let me know whether it works.

Kind regards,
Diego

[shopthriae]

THANK YOU THANK YOU THANK YOU! That worked perfectly.

Gratitude ❤️

[diego_ezfy]

@shopthriae 

You're welcome!

Next time feel free to contact me personally, I'll be happy to help.

Kind regards,
Diego

[Anka_Brimful]

I am having a similar spacing issue with my Klaviyo embedded form, but instead of padding, it's the spacing between the buttons. Here's the embedded form:

https://www.brimfulshop.com/pages/ig

Any suggestions on how to fix the spacing issues?

Thanks, AM

[molli0707]

so i have the same issue - i added the Klaviyo code you outline to the base.css since i don't see a 'theme.css' - any ideas? thanks!

page is https://mitexstream.com/pages/il-state-fair