Divs don't collapse as they should - media queries
I'm working with tutorial about responsive website design but I don't have
any idea why this code isn't working properly.
Link to tutorial
And here is a demo and code. Where is the problem? How to make right div
to go under left when resize window?
HTML
<body>
<div id="containter">
<img
src="http://cf.badassdigest.com/_uploads/images/28150/alternate_oscars_header__index.jp"/>
<div id="left-column"> This is the left column. Staphp dap trap dap
tyryt Staphp dap trap dap</div>
<div id="right-column"> make blablabala and kitcat Staphp dap trap dap
tyryt Staphp dap trap dap tyryt </div>
</div>
CSS
#container {
width: 600px;
margin-right: auto;
margin-left: auto;
}
#left-column {
width: 400px;
float: left;
background: red;
}
#right-column {
width: 200px;
float: right;
background: green;
}
@media screen and (max-width: 590px) {
#container {
width:100%
}
#left-column {
width: 70%;
float: left;
background: red;
}
#right-column {
width: 30%;
float: right;
background: green;
}
img {
width: 100%
}
}
@media screen and (max-width: 350px) {
#left-column {
width: 100%
background: red;
}
#right-column {
width: 100%
background: green;
}
}
Random text about nothing because I have no more details.
No comments:
Post a Comment