App Academy

CSS Question - textarea expanding problems

I have the code

button,
input,
select,
textarea {
display: grid;
width: 100%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
box-sizing: border-box;
}

However with width at 100% if you expand a textarea box, it expands every single input box. If I set the width to 600px like the assessment asks, it doesn’t match the screen under 600 pixels. How do I get the textarea box to stop expanding every single input box ?

Hi, and welcome to the forum!

Do you mean that when you manually expand the textarea (click on it and drag it to make it bigger), it makes everything else larger?

If so, you don’t need to worry about that edge case for this assessment. The key for testing this page is to make the entire browser window wider and narrower, and look at how the entire form responds. You will need the form to be the full width of the screen for everything less than 600px screen width, and then have the form stay at 600px width for any screen width that is 600px or greater.

Let me know if this helps answer the question, or feel free to ask some more follow-ups!
Jesse

Okay good, thank you ! Everytime I’d expand the text area it would stretch all of the inputs ! I did find a work around that limits it to resize vertical only if anyone else is curious -
textarea {
width: 100%;
height: 90%;
resize: vertical;
}

1 Like