CSS: Four Column Div Layout Shrinks to Stacked Two Column Div [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a four-column div layout.
When viewing the page on mobile, I want the layout to shrink to a two-column div.
JsFiddle
CSS:
.style1 {
font-style:normal;
font-weight:bold;
color:#FFFFFF;
}
#footer {
clear:both;
float:left;
width:100%;
}
#footer p {
margin-left:2%;
padding-right:2%;
}
/* Start of Column CSS */
.container1 {
float:left;
width:100%;
position:relative;
}
#col1 {
float:left;
width:23%;
min-height:268px;
position:relative;
margin-right:10px;
/*left:77%;*/
padding:10px;
overflow:hidden;
background-color:#DDDDDD
}
#col2 {
float:left;
width:23%;
min-height:268px;
position:relative;
margin-right:10px;
/*left:81%;*/
padding:10px;
overflow:hidden;
background-color:#DDDDDD
}
#col3 {
float:left;
width:23%;
min-height:268px;
position:relative;
margin-right:10px;
/*left:85%;*/
padding:10px;
overflow:hidden;
background-color:#DDDDDD;
}
#col4 {
float:left;
width:23%;
min-height:268px;
position:relative;
/*margin-right:10px;
left:89%;*/
padding:10px;
overflow:hidden;
margin-bottom:15px;
background-color:#DDDDDD
}
#year_banner {
width:auto;
margin:0px 10px 0px 10px;
align-self:center;
background-color:#E60000;
text-align:center;
}
img.displayed {
margin:0 auto;
display:block;
max-width:100%;
height:auto;
}
Any help is appreciated! Many thanks!

Answer 1

You have quite a lot of repeating code. You can eliminate that by using classes; this will also make it much easier to change all of the columns at once when the screen changes size.
For example:
.col{
float:left;
width:23%;
min-height:268px;
position:relative;
margin-right:10px;
padding:10px;
overflow:hidden;
background-color:#DDDDDD
}
#media screen and (max-width:380px){
.col{
width:50%;
}
}

Answer 2

I have prepared a simple example: https://jsfiddle.net/rey9xc1h/
body {
margin: 0;
}
.row {
width: 100%;
min-width: 320px;
margin: 0;
}
.col {
box-sizing: border-box;
background-color: #fff;
float: left;
padding: 10px;
margin: 5px 1%;
width: 98%;
}
#media (min-width: 320px) {
.row {
overflow: hidden; /* Clearfix */
}
.col {
width: 48%;
float: left;
}
}
#media (min-width: 768px) {
.col {
width: 23%;
}
}