Solved

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

shopthriae
Visitor
2 0 0

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?

Accepted Solution (1)

diego_ezfy
Shopify Partner
2967 571 898

This is an 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

View solution in original post

Replies 5 (5)

diego_ezfy
Shopify Partner
2967 571 898

This is an 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
Visitor
2 0 0

THANK YOU THANK YOU THANK YOU! That worked perfectly.

Gratitude ❤️

diego_ezfy
Shopify Partner
2967 571 898

@shopthriae 

You're welcome!

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

Kind regards,
Diego

Anka_Brimful
Shopify Partner
9 1 2

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
Visitor
1 0 0

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