Changing size of input in CSS

There is some strange nesting of the divs in the form which is causing ony 2 fields to be resized.

I noticed your form width is going out of the container on resize. You can wrap your form in a div and set a max-width so it does not overflow the parent container like so:

.form-container{
max-width: 100%;
}

UPDATED CODE:

<html lang="en">

<head>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>form</title>
    <style>
        .bcs_za_form {
            width: 100%;
            background-color: #646C8E;
            height: 790px;
        }
        
        .textnadform {
            padding-top: 50px;
            text-align: center;
            font-size: 35px;
            color: #ffffff;
            width: 100%;
            font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
        }
        
        .zanech {
            font-size: 17px;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 600;
        }
        
        .celyform {
            width: 100%;
        }
        
        .formular_2 {
            padding-top: 50px;
        }
        
        .formular_4 {
            border: 1px solid #ffffff;
            font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
            font-weight: 600;
            font-size: 14px;
            color: white;
            background-color: #646C8E;
            padding-top: 25px;
            padding-right: 30px;
            padding-bottom: 25px;
            padding-left: 30px;
            border-radius: 10px;
            margin: 10px;
        }
        
        .formular_4::placeholder {
            color: #ffffff;
        }
        
        .formular_3 {
            display: flex;
            flex-direction: column;
        }
        
        .prvedva {
            margin-bottom: 1%;
            flex-grow: inherit;
            display: flex;
            width: 100%;
        }
        
        .druhedva {
            margin-bottom: 3%;
            flex-grow: inherit;
            display: flex;
            width: 100%;
        }
        
        .druhy {
            padding: 0px 0px 0px 20px;
        }
        
        .stvrty {
            padding: 0px 0px 0px 20px;
        }
        
        input:focus,
        select:focus,
        textarea:focus,
        button:focus {
            outline: none;
        }
        
        textarea:focus,
        input:focus {
            color: #3E3E55;
        }
        
        .section {
            display: flex;
            width: 100%;
        }
        
        input.formular_4 {
            -webkit-flex: 1 2 auto;
            -moz-flex: 1 2 auto;
            -ms-flex: 1 2 auto;
            -o-flex: 1 2 auto;
            flex: 1 2 auto;
            margin: 10px;
        }
        
        .form-container {
            max-width: 100%;
            width: 100%;
        }
        
        @media only screen and (max-width: 520px) {
            .section {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <div class="bcs_za_form" id="Kontakt">
        <div class="celyform">
            <div class="textnadform">
                <p class="napismi">Kontaktujte Ma</p>
                <p class="zanech">Zanechajte mi odkaz a ja sa vám budem čo najskôr venovať.</p>
            </div>
            <div class="form-container">
                <div class="formular_2">
                    <form class="formular_3" action="kontakt.php" method="post">
                        <div class="section">
                            <input class="formular_4" type="text" name="meno" placeholder="Meno">
                            <input class="formular_4" type="text" name="priezvisko" placeholder="Priezvisko"> </div>
                        <div class="section">
                            <input class="formular_4" type="text" name="telcislo" placeholder="Tel. číslo">
                            <input class="formular_4" type="text" name="mail" placeholder="Váš E-mail"> </div>
                        <textarea class="formular_4" name="sprava" placeholder="Správa" cols="85" rows="8"></textarea>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

I have omitted the size=”35″ attribute which you can add if you like, and used flex to size the fields. Another way is to set the inputs to eg. 48% but then you have to calculate the margins manually.

You don’t need bootstrap but you can use the library if you have need for it, in terms of consistency it can help you to make evertything look consistent.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top