Can't change the size of a Mailchimp imput field - css

Question

I'm having some difficulties with my Mailchimp form that I want to customize a little bit.
Here is the code:
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
background: rgba(76, 175, 80, 0.0);
color: #000000;
padding: 0px;
text-align: center;
}
/* Styles the input boxes */
#mc_embed_signup input {
width: 200px;
height:100px
}
/* Styles the subscribe button */
#mc_embed_signup .button {
background: rgb(255, 255, 255, 0.1);
color: #ffffff;
margin: 100 auto;
height: 55px;
}
</style>
<div id="mc_embed_signup">
<form action="//meetwo.us14.list-manage.com/subscribe/post?u=12989e1d2702ab809b7df0ed4&id=26362168c9" 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="Your Email" 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;" aria-hidden="true"><input type="text" name="b_12989e1d2702ab809b7df0ed4_26362168c9" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="GET BETA INVITE" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
So basically, I have something like this:
Form screenshot
As you can see, the email field hasn't the same height of the GET BETA INVITE button and I don't understand when I can change it.
So I'm looking for valuable help.
Thank you!

Answer 1

Your referenced CSS includes changes to #mc_embed_signup input.email which overwrites your #mc_embed_signup input.
Try changing this to: #mc_embed_signup input.email and you should be able to change the height of the input aswell.
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
background: rgba(76, 175, 80, 0.0);
color: #000000;
padding: 0px;
text-align: center;
}
/* Styles the input boxes */
#mc_embed_signup input.email {
width: 200px;
height: 55px
}
/* Styles the subscribe button */
#mc_embed_signup .button {
background: rgb(255, 255, 255, 0.1);
color: #ffffff;
margin: 100 auto;
height: 55px;
}
</style>
<div id="mc_embed_signup">
<form action="//meetwo.us14.list-manage.com/subscribe/post?u=12989e1d2702ab809b7df0ed4&id=26362168c9" 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="Your Email" 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;" aria-hidden="true"><input type="text" name="b_12989e1d2702ab809b7df0ed4_26362168c9" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="GET BETA INVITE" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->