html - How to link website to several media queries? -


i want style html differently according different media queries. example, want html display in way when viewed on browser width of 1024px or less, , in way if viewed on browser landscape orientation (like when phone flipped over). here tried doing;

@media (max-width: 1024px) {  	h1{          margin-top: 10px;      }  }    @media (orientation: landscape) {  	h1{          margin-top: 20px;      }  }
<html>      <body>             <h1>hello world</h1>      </body>  </html>

but unfortunately didn't work. problem when loaded site on landscape device code did not change.

note: problem not media queries not functioning. is, being unable use more two media queries.

thank you.

for beginning, try use instead of have:

@media screen , (max-width: 1024px) {...

Comments

Post a Comment