Element not displaying as block - html

Question

I have 3 boxes that in a normal desktop viewport they display in an inline fashion. My issue is when in a 640 viewport or less I cannot get the boxes to display: block; . I have tried putting the display: block in the .box class and the individual color ids. What happens is the boxes overlap and lay on each other.
Does anyone see what I am doing wrong in my attempt?
<section id="info">
<article>
<a href="projects"><div id="green" class="box">
<div class="info-box-title">PROJECTS</div>
<div class="info-box-description">Over 60 years of accumulated projects.</div>
</div></a>
<a href="about"><div id="yellow" class="box">
<div class="info-box-title">ABOUT US</div>
<div class="info-box-description">Find out about - The Eslich Wrecking Company.</div>
</div></a>
<a href="contact"><div id="red" class="box">
<div class="info-box-title">CONTACT US</div>
<div class="info-box-description">Contact us for more information.</div>
</div></a>
</article>
</section>
Default CSS
#info {
max-width: 80%;
height: auto;
padding: 100px 10%;
margin: 100px 10%;
}
.box {
width: 20%;
height: 300px;
opacity:0;
position: absolute;
line-height: 1.5em;
}
#green, #yellow, #red {
box-shadow: inset 0 0 0 0;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#green {
background: #3e745b;
left: 15%;
}
#yellow {
background: #6f9697;/*#f3db6d*/
left: 40%;
}
#red {
background: #3e745b;
left: 65%;
}
#green:hover, #yellow:hover, #red:hover {
/*box-shadow: inset 0 300px 0 0 #6f9697;*/
box-shadow: inset 0 300px 0 0 #303030;
}
#green.green{animation:slideinGreen .5s ease}
#yellow.yellow{animation:slideinYellow 1.3s ease}
#red.red{animation:slideinRed 2s ease}
#green.active,#red.active,#yellow.active{opacity: 1}
#keyframes slideinGreen {
from {
left: calc(25% - 250px);opacity:0;
}
}
#keyframes slideinYellow{
from {
left: calc(45% - 350px);opacity:0;
}
}
#keyframes slideinRed {
from {
left: calc(65% - 450px);opacity:0;
}
}
Media query of 640px or less
/*---Fade In Boxes---*/
#info {
max-width: 100%;
height: auto;
padding: 100px 0%;
margin: 0;
}
.box {
width: 100%;
height: 200px;
position: absolute;
line-height: 1.5em;
display: block;
}
#green {
left: 0%;
}
#yellow {
left: 0%;
}
#red {
left: 0%;
}

Answer 1

Your absolute positioning on the box class is causing the issue. The elements are overlapping one another because of this.

Answer 2

Change position of .box to relative:
#media screen and (max-width: 640px) {
.box {
width: 100%;
height: 200px;
position: relative;
line-height: 1.5em;
display: block;
}
Because #home-info-container have padding: 100px 15%, 3 boxes can full width. If you want full with for 3 boxes, and keep padding ofdescription:
#media screen and (max-width: 640px) {
#home-info-container {
padding-left: 0;
padding-right: 0;
}
#home-info-container-description {
padding-left: 15%;
padding-right: 15%;
}
}