After searching Google for an hour and tinkering with the code, I'm still unable to figure out why my divs refuse to stack on top of each other.
One div keeps appearing below the other, and I'm experiencing a mental block at the moment. Any suggestions would be greatly appreciated.
To rephrase the issue: How can I make all divs push down the content of other divs instead of going underneath the subsequent div?
To see the problem in action, please visit this Codepen link: https://codepen.io/livinglegendparagon/pen/wzWwya
/* Custom Styles */
body {
background-color: #000;
color: #000;
}
#bg {
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 1;
position: relative;
height: -webkit-calc(100vh);
height: -moz-calc(100vh);
height: calc(100vh);
}
#PUTBACKGROUNDHERE, #PUTBACKGROUNDHERE2, #PUTBACKGROUNDHERE3, #PUTBACKGROUNDHERE4 {
background-color: #fff;
width: 100%;
position: relative;
height: 100%;
// min-height: -webkit-calc(100vh);
// min-height: -moz-calc(100vh);
// min-height: calc(100vh);
padding: 2.5% 0;
background-color: #fff;
display: block;
float: left;
clear: both;
@media (min-width: 280px) {
padding: 2.5% 5%;
}
}
#backGroundForViewWelcome {
background-color: white;
min-height: -webkit-calc(100vh);
min-height: -moz-calc(100vh);
min-height: calc(100vh);
}
.wrapper {
height: 100%;
width: 100%;
display: block;
}
.boxForServices {
position: relative;
height: 21.5vh;
margin: 3vh auto;
width: 100%;
color: white;
&:first-child {
margin-top: -webkit-calc(3vh + 40px);
margin-top: -moz-calc(3vh + 40px);
margin-top: calc(3vh + 40px);
}
&:last-child {
margin-bottom: -webkit-calc(3vh - 40px);
margin-bottom: -moz-calc(3vh - 40px);
margin-bottom: calc(3vh - 40px);
}
}
.boxForServicesTitle {
cursor: pointer;
position: relative;
text-align: center;
top: 50%;
border: red 5px solid;
background-color: blue;
border-radius: 5px;
margin: auto 5vh;
padding: 5vh 10%;
}
#sizeThisTextBoxForServices {
margin: 10% 10%;
width: 80%;
}
.centerBox {
margin: auto;
text-align: left;
}
.otherInput {
display: block;
width: 100%;
margin-bottom: 5%;
}