Solved

Margins on page with embedded form?

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
2936 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 4 (4)

diego_ezfy
Shopify Partner
2936 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

shopthriae
Visitor
2 0 0

THANK YOU THANK YOU THANK YOU! That worked perfectly.

Gratitude ❤️

diego_ezfy
Shopify Partner
2936 562 883

@shopthriae 

You're welcome!

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

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

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