-
AuthorPosts
-
May 12, 2018 at 5:57 am #955540
Hi there,
I have a signup form that was originally a fullwidth color section, but I wanted to appear directly above the footer without having to load on every page. So I created a custom widget and posted the code there.It looks great in my staging environment (login below), but today did not look correct on my live environment. I’ve verified the enqueuing of the MailChimp stylesheet is the same on both sites and CSS files are the same on both sites.
In my production environment (login below), it requires me to call the style sheet again in the widget. This is the only way it displays properly. Otherwise, the main theme overwrites some of the MailChimp styles.
You can see what I mean if you remove <link href=”//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css” rel=”stylesheet” type=”text/css”> from the email-signup custom widget in production.
I hope you can help!
May 13, 2018 at 10:51 pm #956144Hey aevans130,
It seems that you have found a good solution for the issue, I assume that what you don’t like about it is having to call the stylesheet again. My first thought is that although you are calling it again I don’t believe the browser is going to download it again, only reorder it while parsing it.
But I thought of another way around this, by adding the styles to WordPress > Customize > Additional CSS which is the last one to load.#mc_embed_signup form {text-align:center; padding:10px 0 10px 0;} .mc-field-group { display: inline-block; } /* positions input field horizontally */ #mc_embed_signup input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;} #mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;} #mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */ #mc_embed_signup .button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #aaa; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;} #mc_embed_signup .button:hover {background-color:#777; cursor:pointer;} #mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;} #mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;} #mc_embed_signup #mce-error-response {display:none;} #mc_embed_signup #mce-success-response {color:#529214; display:none;} #mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;} @media (max-width: 768px) { #mc_embed_signup input.email {width:100%; margin-bottom:5px;} #mc_embed_signup .clear {display: block; width: 100% } #mc_embed_signup .button {width: 100%; margin:0; } }
I then removed this from your widget:
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
and it is working, please check.
Best regards,
MikeMay 15, 2018 at 5:20 am #956793Thanks, Mike! It’s working.
May 15, 2018 at 11:16 am #956895Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
And if there are features that you wish Enfold had, you can request them and vote the requested ones here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)Best regards,
Mike -
AuthorPosts
- The topic ‘Email signup form requires 2 calls to CSS to display correctly’ is closed to new replies.