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.

link tutorial

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

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -