html - media screen and max width -
html - media screen and max width -
i doesnt know much media queries, want seek create responsive divs. set div resolutions:
@media screen , (max-width:768px) { div#zarada p {width:100%; font-size: 14px;} .zaradabox img {display:none;} } @media screen , (max-width:1024px) { div#zarada p {width:38%; font-size: 14px;} } @media screen , (max-width:1280px) { div#zarada p {width:38% } } @media screen , (max-width:1366px) { div#zarada p {width:39% } } @media screen , (max-width:1440px) { div#zarada p {width:42%} } @media screen , (max-width:1536px) { div#zarada p {width:46% } } @media screen , (max-width:1600px) { div#zarada p {width:48% } } @media screen , (max-width:1680px) { div#zarada p {width:50% } } @media screen , (max-width:1920px) { div#zarada p {width:56% } }
but if display 1024x600px or any, read width:56% (last style line) what missed?
essentially code saying "if it's screen's size, until reach max-width. since smallest value screen size, lastly media query overriding of previous ones.
if require such specific handling of divs, specify min-width in handling. e.g.
@media screen , (max-width:768px) { div#zarada p {width:100%; font-size: 14px;} .zaradabox img {display:none;} } @media screen , (min-width:769px) , (max-width:1024px) { div#zarada p {width:38%; font-size: 14px;} } @media screen , (min-width:1025px) , (max-width:1280px) { div#zarada p {width:38% } } @media screen , (min-width:1281px) , (max-width:1366px) { div#zarada p {width:39% } }
etc. luck , allow me know how works!
html css
Comments
Post a Comment