Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Karson Kalt
Karson Kalt
10,935 Points

Textarea Breaking Outside Parent Element

The <textarea> input is breaking outside of its parent container when the page becomes extremely narrow (e.g. mobile). It's sitting inside of a .contact div and I can't seem to identify why it's breaking. Here's what I've got:

<div class="contact">
            <h2>CONTACT</h2>
            <ul>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Instagram</a></li>
                <li><a href="#">Email</a></li>
            </ul>
            <form>
                <textarea></textarea>
                <input type="button" name="send" value="Send Message">     
            </form>  

textarea {
    border: 5px solid black;
    background-color:inherit;
    max-width: 335px;
    width:100%;
    height:125px;
    font-size:1em;
    padding:10px;
    outline: none;
    overflow: auto;
}
.contact {
    width:370px;
    border-left:5px solid black;
    padding-left:30px;
}

1 Answer

Christina Pagano
Christina Pagano
15,676 Points
Christina Pagano
Christina Pagano
15,676 Points

Is there a closing tag for the .contact div? You can use media queries to adjust the sizes of the input and text area on different screen widths, or try setting the max-width on both of them to 100% (so they can't be wider than their parent).

Karson Kalt
Karson Kalt
10,935 Points

Yes, I closed the DIV, just forgot to include it in the forum. I am trying to stay away from using too many media queries and want it to dynamically adjust to the screen size.