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

Help. The width of input element does not resize when the viewport width changes.

I would like my input elements resize proportionally with other elements when I change the viewport of my browser. Can someone kindly tell me how to do so?

<form action="index.html" method="POST">
    <fieldset>
        <legend class="heading">Contact Information</legend>
            <div class="form-wrapper">
                <label for="name" class="upper-label">Full Name</label><br>
                <input type="text" id="name" name="user_name" size="1" required><br>

                <label for="email" class="upper-label">Email Address</label><br>
                <input type="email" id="email" name="user_email" size="10" required><br>

                <label for="number" class="upper-label">Phone Number</label><br>
                <input type="tel" id="number" name="user_number" size="10"><br>

                <label for="address" class="upper-label">Street Address</label><br>
                <input type="text" id="address" name="user_address" size="10"><br>

                <label for="city" class="upper-label">City</label><br>
                <input type="text" id="city" name="user_city" size="10"><br>

                <label for="state" class="upper-label">State</label><br>
                <select name="user_state" id="state" size="10">
                    <option disabled selected value="">Choose State</option>
                    <option value="California">California</option>
                    <option value="Washington">Washington</option>
                </select><br>
                <label for="zip" class="upper-label">Zip Code</label><br>
                <input type="number" id="zip" name="user_zip" size="10"><br>
            </div>
    </fieldset>
    <hr class="thin-hr">
    <fieldset>
        <form action="index.html" method="POST">
            <legend>Newsletter</legend>
            <label>Select the newsletters you would like to receive</label>
            <input type="checkbox" id="htmlnews" name="htmlnames"><label for="htmlnews">HTML News</label><br>
            <input type="checkbox" id="cssnews" name="cssnews"><label for="cssnews">CSS News</label><br>
            <input type="checkbox" name="javascriptnews" id="javascriptnews"><label for="javascripts">Javascript News</label>  

            <label>Newsletter format</label>
            <input type="radio" class="html" name="html"><label for="html">HTML</label><br>
            <input type="radio" class="plaintext" name="plaintext"><label for="plaintext">Plain text</label><br>
            <label>Other topics you'd like to hear about</label><br>
            <textarea></textarea>
        </form>
    </fieldset>
</form> 

html{ background-color: #FCF6F5FF; font-family: 'Rajdhani', sans-serif; }

h1{ font-weight: 700; background-color: #A13941FF; margin: 0; color: #FCF6F5FF; text-align: center; font-size: 40px; padding: 30px; }

h2{ font-weight: 600; color: #A13941FF; text-align: center; font-size: 35px; margin: 0; padding-top: 40px;

}

p{ margin: 0; text-align: center; font-weight: 400; color: #F3DB74FF; font-size: 25px; padding: 10px 20px 40px 20px; }

.thick-hr{ height: 6px; background-color: #A13941FF; margin: 0 15px 5px 15px; border-style: none; }

.thin-hr{ height: 3px; background-color: #A13941FF; margin: 0 15px 5px 15px; border-style: none; }

fieldset{ border-style: none; }

.form-wrapper{ display: flex; flex-direction: column; justify-content: space-around; }

legend{ color: #A13941FF;; font-weight: 600; font-size: 35px; padding: 30px 0 20px 5px; }

.upper-label{ margin: 0; font-weight: 400; color: #F3DB74FF; font-size: 30px; padding-left: 5px; }

input, textarea, select{ border-style: none; background-color: #eff0f1; box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset; font-size: 45px; }

1 Answer

It does resize in my browser, maybe the issue isn't in your code..

Thanks for your help. May I know if it resizes as well in a narrower viewport width in your browser? I try them out on the google developer tool and it does not resize when the viewport width is 388px or lower but it does resize when I increase the viewport width. Maybe the input element itself has default width? Or maybe is my browser?