Auto-resize of textarea based on screen size

The CSS property 'resize' controls whether or not the user can manually resize an element. It won't work automatically based on the screen resolution. You'll have to rely on 'height' and 'width' settings.

If you do the width as a percentage it will adjust to the width if the viewport automatically.

Cd&

If you've never tried this, paste it into a new html doc and give it a whirl. It's lots of fun. Disclaimer: This is paraphrased from an earlier post-- by someone else --somewhere in this forum, but I can't find it so I can't give credit where credit is due.

<style type = "text/css">
@media screen
{ body {background-color: #CCC;} }

@media screen and (max-width:1200px)
{ body {background-color: gray;} }

@media screen and (max-width:960px)
{ body {background-color: #F66;} }

@media screen and (max-width:700px)
{ body {background-color: #99F;} }

@media screen and (max-width:480px)
{ body {background-color: #696;} }
</style>

.. and then any old thing in the body. This only works if the sizes go from largest to smallest. Or, of course, the other way around if you're using min-width.

Once you have this concept, you can put in any style variations you like. For example, change the percentages themselves: 8% margins for a desktop, 4% for tablets, 2% for phones. Or display of navigation headers coded as lists: inline-block for monitors that have enough room; block for small ones.

rainborick - Thanks for the explanation. Looks as though I misunderstood the property, which explains why I couldn't figure this out. :)

I got it to work by setting the width: in CSS as suggested.

lucy24 - I've been converting my site to responsive. The @media adjustments are one of the coolest things I've encountered since first learning html in the late 90s!