CODEWITHSUNDEEP
htmlcsswordpressmailchimpsubmit-button
cnr_eps
cnr_eps

Reputation: 75

MailChimp Submit Button CSS

community,

I have a question regarding the CSS styling of MailChimp's "Submit"-Button. So far I managed to change the colour and font of my button using CSS.

I wanted to change the padding and margin of my Submit button, but after trying different "margin/padding"-combinations and just experimenting inside Google Chrome's DevTools I cannot find a solution to this: It seems like the button is cut off if I increase the padding.

Screenshot 1 is how it looks right now, screenshot 2 is what happens if I increase the top/bottom-padding from 0 to 20px.

Screenshot 1

Screenshot 2 - changed padding in Goolge DevTools

This is what I used in my Custom-CSS to change the font, colour etc:

    #mc_embed_signup .button {
    background-color: #d1e5e6  !important;
    color: #000000 !important;
    border-radius: 0 !important;
    border: none !important;
    font: 16px, bebas_neue, Helvetica,Arial,sans-serif !important;
    font-weight: bold !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-bottom: 13px !important;
    }

And this is the HTML for the submit button:

    <div style="text-align: center !important;"><input type="submit" value="Abonnieren" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

I hope someone out there can help me with this curious issue. I would like that all buttons are the same size (for consistency) but I already struggle with changing the "read more" button for post grids. Hope I can at least adjust the submit button so it doesn't look too off. This one is just too skinny.

Thanks!

Upvotes: 2

Views: 5349

Answers (2)

orabis
orabis

Reputation: 2799

You are using the important keyword in #mc_embed_signup .button. The padding-bottom is one of them

#mc_embed_signup .button {
    font-weight: bold !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-bottom: 13px !important;
}

This is why when you set padding-top and padding-bottom the text is cut-off. Simply, the padding-bottom is not applied. You can either git rid of the important keyword, which I strongly recommend, or use the important keyword with additional specificity rules.

Edit

After removing the important keyword, you can set a height for your button as follows

#mc_embed_signup .button {
 height: 30px;
}

Try to experiment whether you need the !important keyword for it. Try to avoid it as possible

You can also use padding-top and -bottom; for instance as below. Make sure to use auto height. Otherwise, you will need to set uneven values for your paddings; i.e 20 for top and 40 for bottom

#mc_embed_signup .button {
   padding-top: 17px;
   padding-bottom: 17px;
   height: auto;
}

Upvotes: 3

Let&#39;s Enkindle
Let&#39;s Enkindle

Reputation: 53

Update addition css with this:

#mc_embed_signup .button {
    height: 45px !important;
}

Upvotes: 2

Related Questions