I am working on achieving three different layouts in a responsive manner.
1st layout - default design
https://i.sstatic.net/4M0AI.png
2nd Layout - with "min-width:600px"
https://i.sstatic.net/f45xR.png
3rd Layout - with "min-width:700px"
https://i.sstatic.net/Rs2f6.png
I have successfully achieved the above three layouts. However, I have concerns about the fixed height of "200px" for the dark-blue and red colored divs. If the content increases later on, the layout might not adjust properly.
I am looking for a better way to handle this dynamically so that my design remains intact even if the content increases unexpectedly. I have tried to brainstorm ideas but haven't found a suitable solution yet.
Just wanted to ask this question for educational purposes.
I aim to implement this using flexbox, but open to suggestions for other approaches as well.
If anyone could guide me in the right direction, it would be greatly appreciated.
Here is my HTML and CSS code:
/* default color of background */
.red {
background: red;
}
.dark-blue {
background: darkblue;
}
.light-blue {
background: lightblue;
}
.green {
background: green;
}
/* Container properties */
.container {
/* mentioned 100% so that element inside takes full width i.e with id = container2 */
width: 100%;
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
height: 100px;
}
/* Responsive design proprties */
@media screen and (min-width: 600px) {
.dark-blue {
width: 50%;
height: 200px;
}
#container2 {
width: 50%;
height: 50%;
}
}
@media screen and (min-width: 700px) {
.dark-blue,
.red {
height: 200px;
}
.dark-blue {
width: 25%;
order: 2;
}
#container2 {
width: 50%;
flex-wrap: wrap;
}
.red {
width: 25%;
order: -1;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout shifter</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="box dark-blue"></div>
<div class="container" id="container2">
<div class="box light-blue"></div>
<div class="box green"></div>
</div>
<div class="box red"></div>
</div>
</body>
</html>