ChinaXiaoHong ChinaXiaoHong - 2 months ago 13
CSS Question

CSS Form with bootstrap can not center and resize button

I would like to center the email input (using mailchimp) and go button and also have a better visual on it, at least increase the width of the enter your email field to be at least 200px width or 80% of the grid but I really don't know how to change that, I tried everywhere.



my html code:

<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
<div class="subscribe">
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<div id="mc_embed_signup_scroll">
<div class="indicates-required">Subscribe to know more!
</div>
</div>
</div>
</div>
</div>
</div>
<div id="mc_embed_signupform">
<div class="container-fluid">
<div class="container">
<form class="form-inline" action="http://nibook.us14.list-manage.com/subscribe/post?" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<div class="form-group formwidth">
<input type="email" value="" placeholder="Enter your email" name="EMAIL" class="requiredemail" id="mce-EMAIL">
</div>
<input type="submit" value="Go" name="subscribe" id="mc-embedded-subscribe" class="button">
</form>
</div>
</div>
</div>
<div class="col-lg-4">
</div>
</div>




my form css

/* MailChimp Form Embed Code - Classic - 12/17/2015 v10.7 */
#mc_embed_signup{background:#EEF1F8; font:14px Helvetica,Arial,sans-serif; max-width:100%;display:block;margin:auto;text-align:center;}
#mc_embed_signupform{background:#EEF1F8; font:14px Helvetica,Arial,sans-serif; width:60%;display:block;margin:auto;padding-left:50px;padding-bottom:50px;}
#mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 3%; width:80%}

.button {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; background-color: #0670EB; border:solid; border-width:thin; border-color:#0670EB;border-radius:4px; transition: all 0.23s ease-in-out 0s; color: #FFFFFF; cursor: pointer; font-weight: bold; height: 40px; line-height: 32px; padding-left:10px; text-align: center; text-decoration: none; width: 100px;margin-left:20px;}
.button:hover {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; background-color: #FFFFFF; border: 1 none; border-color:#0670EB;border-radius:4px; transition: all 0.23s ease-in-out 0s; color: #0670EB; cursor: pointer; font-weight: bold; height: 40px; line-height: 32px; padding-left:10px; text-align: center; text-decoration: none; width: 100px;margin-left:20px;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}

#mc_embed_signup .indicates-required {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; color:#4C535D; text-align:left; font-size:25px; margin-right:4%;padding-top:20px;padding-bottom:20px;float:left}

.requiredemail {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; color:#333333; font-size:12px; height:40px;padding:10px;margin-left:auto; margin-right:auto;max-width:80%;}

#mc_embed_signup .mc-field-group.input-group ul {margin:0; padding:5px 0; list-style:none;}
#mc_embed_signup .mc-field-group.input-group ul li {display:block; padding:3px 0; margin:0;}
#mc_embed_signup .mc-field-group.input-group label {display:inline;}
#mc_embed_signup .mc-field-group.input-group input {display:inline; width:auto; border:none;}

#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;}

#mc-embedded-subscribe {}
#mc_embed_signup #num-subscribers {font-size:1.1em;}
#mc_embed_signup #num-subscribers span {padding:.5em; border:1px solid #ccc; margin-right:.5em; font-weight:bold;}

#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {display:inline-block; margin:2px 0 1em 0; padding:5px 10px; background-color:rgba(255,255,255,0.85); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size:14px; font-weight:normal; z-index:1; color:#e85c41}
#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {display: inline-block;border:2px solid #e85c41;}

Answer
1)    div is missing 
2)   remove container class
 3)
     <div class="form-Ccontainer">
     <div class="form-group formwidth">
                                <input type="email" value="" placeholder="Enter your email" name="EMAIL" class="requiredemail" id="mce-EMAIL">
                            </div> 

<input type="submit" value="Go" name="subscribe" id="mc-embedded-subscribe" class="button">


 </div>

 4)         <style>
       .form-Ccontainer{width:100%;max-width:400px;margin:auto;}
        .requiredemail{max-width:100%}
       </style>