responsive web design using layout shift
Question
I am new to responsive web design. The output i want is div tag which contain dark-blue,light-blue,green,red colour should display in stacked order when screen width is less than 500px ie like this image media query less than 500px .
When the screen width greater than 500px it should display as same as the code snippet output.but the first one display like this wrongly displayed for screen < 500px .
The first one can be obtained by minimizing the browser. The html and css which i used is.pls tell why itis not diplaying light-blue and green color.
.container{ display:flex; flex-wrap:wrap; } .box{ width:100%; min-height: 150px; } .dark-blue { background-color: blue; } .light-blue { background-color: skyblue; } .green { background-color: #0C8542; } .red { background-color: #EC1D3B; } @media screen and (min-width:500px) { #container2 { width:50%; } .dark-blue { width:50%; } }
<!DOCTYPE html> <html> <head> <title>Layout Shift</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <link type="text/css" rel="stylesheet" href="main.css"> </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>
.
1 answers
solution1
0 ACCPTED 2016-10-30 23:54:31
How does this look? http://codepen.io/panchroma/pen/NRZMZR
The HTML is unchanged, in the CSS I've moved the .container styling inside the @media query. The end result of the change is that at a viewport width less than 500px the .container display is block, and each div will be full width.
Hope this helps!
CSS
.box{
width:100%;
min-height: 150px;
}
.dark-blue {
background-color: blue;
}
.light-blue {
background-color: skyblue;
}
.green {
background-color: #0C8542;
}
.red {
background-color: #EC1D3B;
}
@media screen and (min-width:500px){
.container{
display:flex;
flex-wrap:wrap;
}
#container2{
width:50%;
}
.dark-blue{
width:50%;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.