CODEWITHSUNDEEP
htmlcss
user4752928
user4752928

Reputation:

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>

Upvotes: 2

Views: 2922

Answers (3)

B. Fleming
B. Fleming

Reputation: 7220

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 this HTML, we 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!

Upvotes: 3

G-Cyrillus
G-Cyrillus

Reputation: 105873

You are selecting the wrong element.

you can use min-width media querie to reduce CSS

@media screen and (min-width: 768px) {
  #name>div {
    float: left;
    width: 50%
  }
}
<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>

or use flex and set min-width to the div instead using @media

#name {
  display: flex;
  flex-wrap: wrap;
}

#name>div {
  flex: 1;
  min-width: 384px;/* x2 = 768px*/
  box-shadow:0 0 0 1px;/* see me*/
}
<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>

Upvotes: 0

Rafael
Rafael

Reputation: 7746

Use flexboxes, then change the flex-direction on said media query:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <style>
        .container {
            display: flex;
        }
        .box {
            margin: 1%;
            padding: 1%;
            flex-basis: 46%;
        }
        @media screen and (max-width: 769px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
    <body>
        <main class="container">
            <div class="box" style="background: red">
                <p>hello</p>
            </div>
            <div class="box" style="background: blue">
                <p>world</p>
            </div>
        </main>
    </body>
</html>

Upvotes: 2

Related Questions