Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Auto-resize of textarea based on screen size



7:41 am on Apr 9, 2013 (gmt 0)

5+ Year Member

I have:
textarea{resize:both;} present, however, the textarea does not resize itself on smaller resolutions.

Is there something else required to make this work, or is this simply the handle offered by Firefox/Chrome? (the icon present in the corner of every textarea that allows you to drag/widen the textarea box)

I would like the textarea to shrink itself if the screen size is smaller than 300px (for example).


2:51 pm on Apr 9, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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.


4:33 pm on Apr 9, 2013 (gmt 0)

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



7:39 pm on Apr 9, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

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;} }

.. 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.


1:30 am on Apr 10, 2013 (gmt 0)

5+ Year Member

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!

Featured Threads

Hot Threads This Week

Hot Threads This Month