I have a good handle on accomplishing this using JavaScript, but I'm now curious if there is some clever CSS trick that can achieve the same result. My goal is to have each div take up the entire screen when viewed on a mobile device. Below is what it currently looks like.
https://i.sstatic.net/epYMm.png
Below is the CSS code for each div:
.center{
background-color:#ffffff;
width:33.33%;
height: 100%;
display: inline-block;
}
.left{
background-color:#ffffff;
width:33.33%;
height: 100%;
float:left;
overflow: hidden;
}
.right{
background-color:#ffffff;
width:33.33%;
height: 100%;
float:right;
overflow: hidden;
}