Nicholas Pesa Nicholas Pesa - 5 months ago 12
HTML Question

Make divs in a row stack on top when screen size is smaller

So i Have two divs that I have figured out how to display horizontally next to eachother in a row with two columns. Once I shrink the screen size they seem to just over lap eachother. I was wondering if there is a quick way to make them stack on top of eachother once the screen size shrinks smaller than a certain size. Really I need the left item to stack on top of the right item.

Here is the html code:

<div id="video-section" align="center">
<div class="video">
<iframe src="some-video-url" width="100%" height="100%"></iframe>
</div>
<div class="bullets">
<p> <h4 align="center">Text</h4>
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</p>
</div>
<div class="clearfix"></div>
</div>


Here is the css:

#video-section {
max-width: 1000px;
margin: 0 auto;
vertical-align: center;
}

.video {
width: 50%;
height: auto;
display: inline-block;
float: left;
}

.bullets {
width: 50%;
text-align: left;
display: inline-block;
float: right;
}


Here are images of what this looks like:

desktop

mobile

Any help is appreciated, the main goal is to stack these on top of each other once the screen size is smaller. If my code is all wrong as well I am very open to changing all of it if someone thinks that there is a more efficient way of doing this.

To give all information necessary, I am doing this in sublime text, using the polymer library with paper elements, and deploying this to a firebase hosting server.

Answer

Add a media query that creates a break point at which the width of the elements is bumped up to 100%, like this:

#video-section {
  max-width: 1000px;
  margin: 0 auto;
  vertical-align: center;
}
.video {
  width: 50%;
  height: auto;
  float: left;
}
.bullets {
  width: 50%;
  text-align: left;
  float: left;
}

@media screen and (max-width: 500px) {
  .bullets, .video {width: 100%;}
}

Note that I have made some small improvements on your CSS too.