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

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -