Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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!

    #956144

    Hey 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,
    Mike

    #956793

    Thanks, Mike! It’s working.

    #956895

    Hi,
    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Email signup form requires 2 calls to CSS to display correctly’ is closed to new replies.