Why are these block elements on the same line? - html

Question

I'm trying to get the two block elements to be on different lines when the browser window is less than 768px. The media query tells the yellow and green divs to be blocks in responsive view, but nothing happens. If you apply the display block to all elements on mobile view, nothing still happens.
I thought block elements were 100% wide and operate on a single row?
#newsletter-wrap {
width: 100%;
height: auto;
background: lightgrey;
float: left;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-weight: 300;
padding: 25px 25px;
box-sizing: border-box;
}
#newsletter-wrap > *, #newsletter-wrap > form > * {
display: inline;
vertical-align: middle;
}
#newsletter-button {
border: none;
border-radius: 6px;
padding: 10px 20px;
border: 1px solid #333;
cursor: pointer;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#mce-EMAIL {
background: pink;
width: 300px;
height: 25px;
margin: 0 25px;
border: 1px solid #333;
text-align: center;
padding: 4px;
}
#mc-embedded-subscribe-form {
background: green;
width: auto;
text-align: center;
height: auto;
float: left;
}
#newsletter-wrap-text {
background: yellow;
width: auto;
height: auto;
float: left;
}
/* MOBILE */
#media handheld, screen and (max-width: 768px) {
/* BELOW HAS A PROBLEM */
#newsletter-wrap-text, #mc-embedded-subscribe-form {
display: block;
}
}
<section id="newsletter-wrap">
<div id="newsletter-wrap-text">wuf wfbrie erig ergibw eiwbfwe wef00x0 __W)9.</div>
<form action="https://eiurfhyergv.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="mce-responses">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
</section>

Answer 1

As you have set display: flex to the parent section container, you have to set flex-direction: column; in order to display the child elements in a column rather than in a row. (or you could just not use display: flex at all and leave the block elements as they are, but I assume that flex is there for a reason like responsiveness or something)
By the way, you could also leave out the float: left as it has no effect in this case. I'd generally advise to clean the CSS up a bit. You are using display: flex;, but then there are the floats and display: inline, which is then again being overwritten by display: block - that's all unnecessary!
#newsletter-wrap {
width: 100%;
height: auto;
background: lightgrey;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 22px;
font-weight: 300;
padding: 25px 25px;
box-sizing: border-box;
}
#newsletter-wrap > *, #newsletter-wrap > form > * {
display: inline;
vertical-align: middle;
}
#newsletter-button {
border: none;
border-radius: 6px;
padding: 10px 20px;
border: 1px solid #333;
cursor: pointer;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#mce-EMAIL {
background: pink;
width: 300px;
height: 25px;
margin: 0 25px;
border: 1px solid #333;
text-align: center;
padding: 4px;
}
#mc-embedded-subscribe-form {
background: green;
width: auto;
text-align: center;
height: auto;
float: left;
}
#newsletter-wrap-text {
background: yellow;
width: auto;
height: auto;
float: left;
}
/* MOBILE */
#media handheld, screen and (max-width: 768px) {
/* BELOW HAS A PROBLEM */
#newsletter-wrap-text, #mc-embedded-subscribe-form {
display: block;
}
}
<section id="newsletter-wrap">
<div id="newsletter-wrap-text">wuf wfbrie erig ergibw eiwbfwe wef00x0 __W)9.</div>
<form action="https://eiurfhyergv.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="mce-responses">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
</section>