HTML Question
Make two divs stack when smaller screen size
Two divs next to eachother should stack on top of one another when screen size is <768px. How?
My html is good as-is. For big screens the divs are fine. Am struggling with the css for my code.
@media screen and (max-width: 768px) {
.first-name
{
float: left;
width: 50%
}
}
#name > div {
display:inline-block;
width:49%;
}
<div id="name">
<div>
<div class="input"><label for="first-name">First name</label>
<input autocomplete="on" class='inp_cont' id="first-name" name="last-name" placeholder="Enter your first name" required="" type="text"></div>
</div>
<div>
<div class="input"><label for="last-name">Last name</label>
<input autocomplete="on" class='inp_cont' id="last-name" name="last-name" placeholder="Enter your last name" required="" type="text"></div>
</div>
</div>
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
Here is an alternative setup that utilizes display: inline-block and changing widths:
CSS
#name > div {
display:inline-block;
width:49%;
}
@media screen and (max-width: 768px) {
#name > div {
width: 100%;
}
}
HMTL
<div id="name">
<div>
<div class="input">
<label for="first-name">First name</label>
<input autocomplete="on" class='inp_cont' id="first-name" name="last-name" placeholder="Enter your first name" required="" type="text">
</div>
</div><div>
<div class="input">
<label for="last-name">Last name</label>
<input autocomplete="on" class='inp_cont' id="last-name" name="last-name" placeholder="Enter your last name" required="" type="text">
</div>
</div>
</div>
Note that on line 7 of the HTML, you have the closing tag of one div directly beside the opening tag of another. This isn't a mistake--it's necessary for display: inline-block to work correctly, otherwise the whitespace would cause the elements not to display side-by-side!
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download