CODEWITHSUNDEEP
htmlcssmedia-queriesresponsive
Aakrisha Agarwal
Aakrisha Agarwal

Reputation: 11

How to resize Text Field using media queries?

The responsive contact form is working properly for textarea but not for input type=text fields on smaller screens. I tried adding media queries.

Here is my code:

            <!doctype html>
            <html>
            <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
            .contact-form {
                line-height: 1.4;
                width: 50%;
                margin: 0 auto;
            }
            .form-group {
                background: #F6DDCE;
                margin-bottom: 1em;
                padding: 10px;
            }
            .form-group ul {
                list-style: none;
                margin: 0 0 2em;
                padding: 0;
            }
            .form-group li {
                margin-bottom: 0.5em;
            }
            .form-group h3 {
                margin-bottom: 1em;
            }
            .form-fields input[type="text"],
            .form-fields input[type="email"]{
            box-sizing: border-box;
            padding: 0.6em 0.8em;
            color: #999;
            background: #f7f7f7;
            border: 1px solid #e1e1e1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.9em;
            text-decoration: none;
            line-height: normal;
            max-height: 3em;
            }
            .form-fields input[type="text"]:focus,
            .form-fields input[type="email"]:focus,
            .form-fields textarea:focus {
            color: #333;
            border: 1px solid #C17CCF;
            outline: none;
            background: #f2f2f2;
            }
            .form-fields textarea {
                display: block;
                box-sizing: border-box;
                font: 0.9em Lato, Helvetica, sans-serif;
                width: 100%;
                height: 6em;
                overflow: auto;
                padding: 0.6em 0.8em;
                color: #999;
                background: #f7f7f7;
                border: 1px solid #e1e1e1;
                line-height: normal;
            }
            .form-fields label{
                text-align: left;
            }
            .send-btn {
                border-radius: 0px 2px 2px 0px;
                box-sizing: content-box;
                background: #8B798C;
                font-weight: 300;
                text-transform: uppercase;
                color: white;
                padding: 0.35em 0.75em;
                border: none;
                font-size: 1.1em;
                text-decoration: none;
                cursor: pointer;    
            }
            .send-btn:hover, .send-btn:focus {
                background: #C17CCF;
            }
            /*flex it*/
            .send-form {
                display: flex;
                flex-wrap: wrap;
                }
            .form-group {
                flex: 1 0 300px;
            }
            .form-submit {
                flex: 0 0 100%;
            }
            .form-fields li {
                display: flex;
                flex-wrap: wrap;
            }
            .form-fields input[type="text"],
            .form-fields input[type="email"]{
                flex: 1 0 230px;
            }
            .form-fields label {
                flex: 1 0 90px;
                }


            /* Adding media queries*/

            @media (max-width: 400px) {
            body {
                width: 100%;
                margin: 0;
                padding: 0 0 2em;
            }
            header, .form-submit {
                padding: 2% 5%;
            }
            }
            </style>
            </head>
            <body>
            <header>
            </header>
            <form class="contact-form">
            <section class="form-group">
            <h3>Contact Us</h3>
            <ul class="form-fields">
            <li><label for="name">Name:</label> <input type="text" name="name" id="name" placeholder="your full name" class="text-input"></li>
            <li><label for="subject">Subject:</label> <input type="text" name="subject" id="subject" placeholder="subject" class="text-input"></li>
            <li><label for="email">Email:</label> <input type="email" name="email" id="email" placeholder="confirmation email" class="text-input"></li>
            <li><label for="comments">Comments:</label><textarea id="comments" name="comments" class="text-area">comments</textarea> </li>
            </ul>
            </section>
            <section class="form-submit">
            <button type="submit" class="send-btn">Send</button>
            </section>
            </form>
            </body>
            </html>

Upvotes: 1

Views: 5751

Answers (1)

Vivekraj K R
Vivekraj K R

Reputation: 2548

It's because of the flex property flex: 1 0 230px; for input fields. Override it with max-width: 100%; in media query breakpoints.

Here's the fiddle:

.form-fields input[type="text"],
.form-fields input[type="email"] {
    max-width: 100%;
}

Upvotes: 3

Related Questions