I am currently attempting to create a media query using Flexbox in order to display an input element below another one instead of side by side. However, the issue I am facing is that when I set the flex-direction to column, the width of the input is not as expected. Here is the current output:
https://i.sstatic.net/M4dep.png
On the other hand, if I change the flex-direction to column, the input width does not remain the same. This results in the following layout:
https://i.sstatic.net/xrWQo.png
Below is the HTML code snippet:
<div id="mc_embed_signup">
<form action="//eliasgarcia.us8.list-manage.com/subscribe/post?u=55cf7078733f0b62eb97733e3&id=ace40b1824" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Don't miss any article</label>
<div class="mc-wrapper">
<input type="email" value="" name="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;" aria-hidden="true">
<input type="text" name="b_55cf7078733f0b62eb97733e3_ace40b1824" tabindex="1" value="">
</div>
<div>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
<div class="mc-error">
</div>
</div>
</form>
</div>
Below is the CSS code snippet:
#mc_embed_signup {
label {
font-size: 2em;
font-weight: bold;
display: block;
text-align: center;
}
.mc-wrapper {
display: flex;
justify-content: space-between;
padding: 30px 0px 0px 0px;
}
#mce-EMAIL {
width: 100%;
margin: 0px 30px 0px 0px;
border: 2px solid $medium-grey;
border-radius: 4px;
text-indent: 20px;
}
.button {
margin: 0px auto;
cursor: pointer;
}
}
Can anyone help me understand why this issue is occurring?
NOTE: Unfortunately, I am unable to provide a Fiddle for demonstration purposes as this involves integration with MailChimp, which utilizes a JavaScript script. The script does not add any additional classes, only the ones mentioned above.