raulbaros raulbaros - 3 years ago 177
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>




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