Sandro21
Sandro21

Reputation: 311

Responisve Textarea

Hello guys i am trying to make my textarea responsive. But i have really no idea how to do that. I tryied it with width 100% and max-width 600px. My Container also has a width of 600px. With width 100%the textarea gets smaller then the the Container that also has 600px. With max-width 600px the box gets extremly small. This is my Code:

<div class="container contact">
<textarea class="inputmessage"></textarea>
</div>
.inputmessage{
    float: left;
    border: 2px solid black;
    height: 150px;
    width: 600px;
}
.container{
    text-align: center;
    margin: auto;
}

.contact{
    width: 600px !Important;
}

Upvotes: 1

Views: 87

Answers (1)

Undecided Dev
Undecided Dev

Reputation: 830

Make max width on container to 600 px; remove the float. Check this fiddle.

.inputmessage{
    border: 2px solid black;
    height: 150px;
    width: 100%;
}
.container{
    text-align: center;
    margin: auto;
}

.contact{
    width: 100%!Important;
    max-width:600px;
}

https://jsfiddle.net/Lx89qtte/

Upvotes: 5

Related Questions