Adjusting the dimension of input elements using CSS

Question

Adjusting the dimension of input elements using CSS

Is it possible to change the width of an input without using HTML? I had set the size to "35" and it looked fine on the site (check here at the bottom of the site) until I started working on the mobile version. Now, with a size of 35, it appears very wide and I'm unsure how to maintain the same look. On the mobile version, I want to display it in flex-direction: column. What am I doing wrong?

I attempted something like this:

input [type=text] {
width: 60%;}

But for some reason, it only affects two of my input boxes.

Thank you!

.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;
    display: flex;
    justify-content: center;

}

.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;
}

.formular_4::placeholder {
    color: #ffffff;
}

.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;
}

<div class="bcs_za_form" id="Kontakt">

    <div class="celyform">
        <div class="textnadform">
            <p class="napismi">Contact Me</p>

            <p class="zanech">Leave me a message and I will get back to as soon as possible.</p>
        </div>
  
            <div class="formular_2">
                <form class="formular_3" action="kontakt.php" method="post">
                    <div class="prvedva">
                        <input class="formular_4" type="text" name="meno" placeholder="Name" size="35">
                    <div class="druhy"> 
                        <input class="formular_4" type="text" name="priezvisko" placeholder="Surname" size="35">
                    </div> 
                    </div>
                        <br>
                    <div class="druhedva">
                    
                        <input class="formular_4" type="text" name="telcislo" placeholder="Phone Number" size="35">
                    <div class="stvrty">
                        <input class="formular_4" type="text" name="mail" placeholder="Your E-mail" size="35">
                    </div>
                        <br>
                </div>
                    <div class="">
                        <textarea class="formular_4" name="sprava" placeholder="Message" cols="85" rows="8"></textarea>
                    </div>
                </form>
            </div>

html css forms input

Answer 1

Answer №1

There seems to be an unusual nesting of divs in the form resulting in only 2 fields being resized.

I observed that your form width exceeds the container on resize. To prevent this, you can enclose your form within a div and set a max-width as follows:

.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>
        /*CSS styles*/
        
    </style>
</head>

<body>
    <div class="bcs_za_form" id="Kontakt">
        <div class="celyform">
            <div class="textnadform">
                <p class="napismi">Contact Me</p>
                <p class="zanech">Leave me a message and I'll get back to you soon.</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="First Name">
                            <input class="formular_4" type="text" name="priezvisko" placeholder="Last Name"> </div>
                        <div class="section">
                            <input class="formular_4" type="text" name="telcislo" placeholder="Phone Number">
                            <input class="formular_4" type="text" name="mail" placeholder="Your Email"> </div>
                        <textarea class="formular_4" name="sprava" placeholder="Message" cols="85" rows="8"></textarea>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

The size="35" attribute has been removed for flexibility, and flex property is utilized to size the fields. Alternatively, you can set inputs to a percentage like 48% but manual margin adjustments are needed in that case.

Bootstrap is not required, but can be used for consistency if needed to maintain a uniform look across elements.

Answer 2

There seems to be an unusual nesting of divs in the form resulting in only 2 fields being resized.

I observed that your form width exceeds the container on resize. To prevent this, you can enclose your form within a div and set a max-width as follows:

.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>
        /*CSS styles*/
        
    </style>
</head>

<body>
    <div class="bcs_za_form" id="Kontakt">
        <div class="celyform">
            <div class="textnadform">
                <p class="napismi">Contact Me</p>
                <p class="zanech">Leave me a message and I'll get back to you soon.</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="First Name">
                            <input class="formular_4" type="text" name="priezvisko" placeholder="Last Name"> </div>
                        <div class="section">
                            <input class="formular_4" type="text" name="telcislo" placeholder="Phone Number">
                            <input class="formular_4" type="text" name="mail" placeholder="Your Email"> </div>
                        <textarea class="formular_4" name="sprava" placeholder="Message" cols="85" rows="8"></textarea>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

The size="35" attribute has been removed for flexibility, and flex property is utilized to size the fields. Alternatively, you can set inputs to a percentage like 48% but manual margin adjustments are needed in that case.

Bootstrap is not required, but can be used for consistency if needed to maintain a uniform look across elements.

Answer 3

Answer №2

Have you experimented with a similar approach?

   @media only screen and (max-width: 600px) {
  .formular_4 {
    size: 20;
  }
}

To set the maximum width, specify the pixel size of the screen needed. In this case, any screen smaller than 600 pixels will follow the specified style rule.

Answer 4

Have you experimented with a similar approach?

   @media only screen and (max-width: 600px) {
  .formular_4 {
    size: 20;
  }
}

To set the maximum width, specify the pixel size of the screen needed. In this case, any screen smaller than 600 pixels will follow the specified style rule.

Answer 5

Answer №3

I have enhanced your form with some Bootstrap to ensure better responsiveness. Check out the snippet below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
<div class="container">
  <form class="formular_3" action="kontakt.php" method="post">
    <div class="prvedva form-group">
        <input class="formular_4 form-control" type="text" name="meno" placeholder="Meno" size="35">
    </div>

    <div class="druhy form-group">
        <input class="formular_4 form-control" type="text" name="priezvisko" placeholder="Priezvisko" size="35">
    </div>

    <div class="druhedva form-group">
        <input class="formular_4 form-control" type="text" name="telcislo" placeholder="Tel. číslo" size="35">
    </div>
    
    <div class="stvrty form-group">
        <input class="formular_4 form-control" type="text" name="mail" placeholder="Váš E-mail" size="35">
    </div>

    <div class="form-group">
        <textarea class="formular_4 form-control" name="sprava" placeholder="Správa" cols="85" rows="8"></textarea>
    </div>
  </form>
</div>

</body>
</html

For more detailed information, please refer to the documentation.

Answer 6

I have enhanced your form with some Bootstrap to ensure better responsiveness. Check out the snippet below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
<div class="container">
  <form class="formular_3" action="kontakt.php" method="post">
    <div class="prvedva form-group">
        <input class="formular_4 form-control" type="text" name="meno" placeholder="Meno" size="35">
    </div>

    <div class="druhy form-group">
        <input class="formular_4 form-control" type="text" name="priezvisko" placeholder="Priezvisko" size="35">
    </div>

    <div class="druhedva form-group">
        <input class="formular_4 form-control" type="text" name="telcislo" placeholder="Tel. číslo" size="35">
    </div>
    
    <div class="stvrty form-group">
        <input class="formular_4 form-control" type="text" name="mail" placeholder="Váš E-mail" size="35">
    </div>

    <div class="form-group">
        <textarea class="formular_4 form-control" name="sprava" placeholder="Správa" cols="85" rows="8"></textarea>
    </div>
  </form>
</div>

</body>
</html

For more detailed information, please refer to the documentation.

Adjusting the dimension of input elements using CSS

Answer №1

Answer №2

Answer №3

Similar questions

Creating a dropdown menu with an initial value fetched from a text file

Emphasize the present selection along with all prior items in a menu

Getting rid of the outline on <html> while tabbing in Firefox

Scrolling to a specific anchor in a React webpage when the URL is opened in

Are you searching for a stylish tabbed navigation menu design?

Having trouble with the alignment in navbar using Bootstrap 4 mr-auto?

Custom CSS Editor for Third Party Visual Studio Themes

Tips for displaying XML content within an AngularJS application using HTML

Unlocking the potential of data inputted in a JQuery Autocomplete form

PHP Exception with dual inputs

Expanding the Background Color when Hovered Over

Removing fields from the admin form in Django for certain users: A step-by-step guide

Customize your file input with Bootstrap 4 using bs-custom-file-input and create a Symfony 5 collection with dynamic upload fields

Mobile navigation menu options on the left and right sides

What is the best way to choose a disabled field using Watir?

Issue with Django query not being successfully transferred to AJAX in JSON structure

Background Patterns on Webpages

What is the best way to include attributes in an HTML element?

Is there a way to create a navigation menu that highlights as we scroll down the page?

What is the best way to eliminate excess space on the right side in Bootstrap 4 while in mobile view?