I've got a container with some divs which make 3 boxes display horizontally.
I am trying to get the divs to stack vertically (centered) on mobile and tablets. The problem I'm having is the media queries and styles I'm using don't seem to be working properly.
<div class="container-2">
<div class="box">
<div class="icon"><i class="fa fa-compact-disc" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Artists</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
</div>
</div>
<div class="box">
<div class="icon"><i class="fa fa-calendar-alt" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Calendar</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
</div>
</div>
<div class="box">
<div class="icon"><i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Contact Us</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
</div>
</div>
</div>
.container-2 {
position: relative;
width: 1200px;
height: 300px;
margin: 100px auto;
}
.container-2 .box {
position: relative;
width: calc(400px - 30px);
height: calc(350px - 30px);
background: #0000005b;
float: left;
margin: 15px;
box-sizing: border-box;
overflow: hidden;
border-radius: 10px;
}
The 3 divs (they are the boxes) will go from horizontal to vertical when on mobile and tablet plus center themselves.
Any pointers on the best way to align/move divs?