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)

Junior Member

5+ Year Member

joined:July 13, 2010
votes: 0

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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
votes: 28

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)

New User

5+ Year Member

joined:Apr 6, 2013
posts: 10
votes: 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)

Senior Member from US 

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

joined:Apr 9, 2011
votes: 598

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)

Junior Member

5+ Year Member

joined:July 13, 2010
votes: 0

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!