[sarah tParticipant]

Hi,

I am trying to centre my signup form in the footer widget. It seems to always want to float left though, unless its my eyes?!

This is the code I am using:

<!– Begin MailChimp Signup Form –>
<link href=”//cdn-images.mailchimp.com/embedcode/slim-081711.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
#mc_embed_signup{background:#0000; clear:centre; font:14px Helvetica,Arial,sans-serif; }

/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>

<div id=”mc_embed_signup”>
<form action=”//thelovelyclinic.us9.list-manage.com/subscribe/post?u=38feb56d48c18ff2f5eee4ab1&id=e5d33f898d” method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>
<div id=”mc_embed_signup_scroll”>

<input type=”email” value=”” name=”EMAIL” class=”email” id=”mce-EMAIL” placeholder=”email address” required>

<!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–>
<div style=”position: absolute; left: -5000px;”><input type=”text” name=”b_38feb56d48c18ff2f5eee4ab1_e5d33f898d” tabindex=”-1″ value=””></div>
<div class=”clear”><input type=”image” id=”submit” class=”submit” src=”http://drsarahtonks.co.uk/wp-content/uploads/2015/09/button.png” value=””/></div>

</div>
</form>
</div>

<!–End mc_embed_signup–>

form#mc-embedded-subscribe-form {
position: relative;
}
form#mc-embedded-subscribe-form input[type=”email”] {
padding-left: 20px;
}
form#mc-embedded-subscribe-form:before {
content: “\f0e0”;
position: absolute;
left: 16px;
top: 29px;
display: block;
margin-bottom: 0;
font-size: 12px;
line-height: 1;
text-decoration: inherit;
color: #272727;
font-family: “FontAwesome” !important;
font-style: normal !important;
font-weight: normal !important;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

I want to centre the button too. Is it just my eyes or is it off?

[sarah tParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Update your code to :

form#mc-embedded-subscribe-form input[type="email"] {
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
}

Add this :

#mc_embed_signup input {
    margin-right: auto;
    margin-left: auto;
    display: block;
}

Hope it helps.

[sarah tParticipant]

Hmmmm now the box is centred, but the envelope icon has gone from inside it and I was hoping to stretch the box over the horizontal length of the widget rather than keep it squashed like this?

[ChristopherModerator]

Hi there,

Update your code to :

form#mc-embedded-subscribe-form input[type="email"] {
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

Hope it helps.

[ChristopherModerator]

Hi there,

Update your code to :

form#mc-embedded-subscribe-form input[type="email"] {
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

Hope it helps.

[sarah tParticipant]

Yes! That kind of works except I still can’t see the small email icon which was inside the input box. It just says foeo now instead of being an icon. The code for this was:

form#mc-embedded-subscribe-form:before {
content: “f0e0”;
position: absolute;
left: 16px;
top: 29px;
display: block;
margin-bottom: 0;
font-size: 12px;
line-height: 1;
text-decoration: inherit;
color: #272727;
font-family: “FontAwesome” !important;
font-style: normal !important;
font-weight: normal !important;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

[ThaiModerator]

Hi There,

Please update your code to to the following CSS:

form#mc-embedded-subscribe-form:before {
content: "\\f0e0";
position: absolute;
left: 16px;
top: 29px;
display: block;
margin-bottom: 0;
font-size: 12px;
line-height: 1;
text-decoration: inherit;
color: #272727;
font-family: "FontAwesome" !important;
font-style: normal !important;
font-weight: normal !important;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Hope it helps!

[sarah tParticipant]

Works a treat, thanks!

[ThaiModerator]

You’re most welcome 🙂

[Author]

Posts