html - Divs don't collapse as they should - media queries -
i'm working tutorial responsive website design don't have idea why code isn't working properly.
and here demo , code. problem? how make right div 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"> left column. staphp dap trap dap tyryt staphp dap trap dap</div> <div id="right-column"> make blablabala , 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 , (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 , (max-width: 350px) { #left-column { width: 100% background: red; } #right-column { width: 100% background: green; } }
random text nothing because have no more details.
i guess meant image , divs aren't resizing planed, happened because had faulty css. @ line 32, 38 , 42 ';' missing. tip use css validator if stuck tutorial code of times it's little this. here fixed jsfiddle btw. wish luck , fun, sam!
#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 , (max-width: 599px) { #container { width:100% } #left-column { width: 70%; float: left; background: red; } #right-column { width: 30%; float: right; background: green; } img { width: 100%; } } @media screen , (max-width: 350px) { #left-column { width: 100%; background: red; } #right-column { width: 100%; background: green; } }
Comments
Post a Comment