Change width size using CSS when window size is reduced -

in general, want body div 60% width of window size. there exceptions.

on large monitor, gets big, have set max-width of 800px, so:

#lbp-text-body {margin-top: 100px; width: 60%; max-width: 800px; text-align: justify}

this works pretty good, text adjusts within range, @ max threshold holds shape.

now want similar small window sizes.

i've added 'min-width: 300px;' , seems seems override width 60%, however, if screen size less 300px, user have scroll horizontally see part of text.

i prefer actual width size change 90% or 100% after viewer size hits 300px threshold.

any ideas on how this?

you can use media query achieve this: js fiddle example

@media screen , (max-width: 300px) {   #lbp-text-body {      // whatever styles want have @ 300px or less   } }

you can use media-queries have specific styles if window greater specific width using min-width.

@media screen , (min-width: 800px) {   #lbp-text-body {      // whatever styles want have @ 800px or more   } }

as side note, want sure have correct viewport meta tag media queries work on each device: viewport meta tag

Bay WIKI