如何在不使用Bootstrap的情况下使HTML表单输入字段响应

Question

I have a really basic HTML form with two text input fields side by side (Name and Company) and a Submit and Back button underneith.

I want to make the width of my input fields scale down as the browser width is decreased.

See 1st attached image for how it currently looks at full width, and 2nd attached image for how I want it to look when the browser window is decreased.

I've tried wrapping the whole Form in a Div and setting the Div to width: 100%; but it has no effect.. I've also tried various other tweaks but feel like I'm blowing in the wind as I don't really know what I should be changing.. any ideas?

<form action="" method="post">
    <div class="row" align="center">

        <div class="column left">
            <label for="name">Name<span class="err"></span></label><br>
            <input id="name" type="text" name="Name"><br>
        </div>
        <div class="column right">
            <label for="company">Company<span class="err"></span></label><br>
            <input id="company" type="text" name="Company"><br>
        </div>

    </div>

    <div align="center">
        <a href="#"><button class="back-btn" type="button">Back</button></a>
        <input class="sign-in-btn" type="submit" value="Sign In">
    </div>

</form>



    * {
        box-sizing: border-box;
    }

    .row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 45px;
        text-align: left;
    }


    input[type=text], select {
        width: 550px;
        height: 100px;
        margin: 10px 15px 50px;
        border: 3px solid #d9569f;
        border-radius: 50px;
        outline: none;
        font-family: sofia-pro-soft, sans-serif;
        font-weight: 300;
        font-size: 30px;
        text-align: center;
        text-align-last: center;
    }


    label {
        font-family: sofia-pro-soft, sans-serif;
        font-weight: 300;
        font-size: 30px;
        color: #555;
        margin-left: 30px;
    }


    input.sign-in-btn {
        width: 250px;
        height: 100px;
        border: 3px solid #fff;
        border-radius: 50px;
        outline: none;
        font-family: sofia-pro-soft, sans-serif;
        font-weight: 300;
        font-size: 30px;
        color: #fff;
        background: #d9569f;
        margin-left: 30px;
    }


    .sign-in-btn:active {
        color: #d9569f;
        background-color: #fff;
        border: 3px solid #d9569f;
    }


    .back-btn {
        width: 250px;
        height: 100px;
        border: 3px solid #fff;
        border-radius: 50px;
        outline: none;
        font-family: sofia-pro-soft, sans-serif;
        font-weight: 300;
        font-size: 30px;
        color: #fff;
        background: #d9569f;
        margin-right: 30px;
    }


    .back-btn:active {
        color: #d9569f;
        background-color: #fff;
        border: 3px solid #d9569f;
    }


    a {
        color: #fff;
        text-decoration: none;
    }

Answer 1

You Can Use media querie for responsive view

 @media screen and (max-width:767px){ input[type=text]{ width:100%; display:inline-block; } } 

Answer 2

You could try something like this:

@media only screen 
and (max-device-width: 800px)
    { 
        input[type=text], select {
            width: 400px;
            ...
    }
}

The part inside of the brackets of the max-device-width are only valid under the specified device screen width value.

Answer 3

Media queries are the best option to keep your content scale down as the browser width is decreased. You can include these media queries in your css

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {} 

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {}