My company's website has an opt-in form but it's not aligning properly.
I want the name, email, and subscribe fields to be on the same line. Any suggestions?
I suspect there might be a conflict with bootstrap.
HTML
<div class="container-fluid">
<div class="row">
<div class="horizontal-mailchimp">
<div id="mc_embed_signup">
<form action="//growthitude.us12.list-manage.com/subscribe/post?u=7325f579d436346d635d003a4&id=75cff09018" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="name">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_7325f579d436346d635d003a4_75cff09018" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
</div>
</div>
CSS
.horizontal-mailchimp .mc-field-group,
.horizontal-mailchimp .clear {
display: inline-block;
}
.horizontal-mailchimp label {
display: none;
height: 1px;
text-indent: -9999px;
}
.horizontal-mailchimp {
background: red;
margin: 20px auto;
padding: 20px;
text-align: center;
}
@media only screen and (max-width: 768px) {
.horizontal-mailchimp .mc-field-group,
.horizontal-mailchimp .clear,
.horizontal-mailchimp input {
display: block;
width: 100%;
}
.horizontal-mailchimp .mc-field-group {
margin-bottom: 5px;
}
}
Any help is greatly appreciated.