This specific CSS code is designed for a responsive template, creating three columns on desktops/laptops/iPads and stacking them for phones. However, there is an issue when viewing this layout on mobile devices where the stacked panels are fixed in height. I am currently experimenting with various CSS solutions to automatically adjust the panel length on mobile views when additional content is added.
* {
box-sizing: border-box;
}
/* Create three equal columns that float next to each other */
.columntop {
float: left;
width: 33.33%;
padding: 10px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 1000px; /* This controls desktop/laptop views only */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}