Input Fields Will Not Resize Correctly in Some Browsers

Question

Input Fields Will Not Resize Correctly in Some Browsers

When resizing a browser, the input fields do not resize properly and end up overlapping each other in the middle, causing distortion before the media script adjusts everything to 100%. The width of the text area set to 100% does not align with the forms. Figuring out this contact form has been quite challenging, and I haven't even attempted to tackle getting it to send an email yet!

Click here to view the design.

Bonus query: Why must the input be wrapped in a span, or it completely disregards the parent divs' boundaries?

Per your request, you can find the JSFIDDLE script here.

.Block {
    width: 100%;
    background-color: #edeeef;
    padding: 50px 0;
    }

.Block:nth-of-type(odd) {
background-color: #ffffff;
}

.Block:After {
content: '';
display: block;
clear: both;
overflow: hidden;
Zoom: 1;
height: 0;
}

.BlockWrapper {
text-align: center;
Max-Width: 60%;
margin: 0 auto;
}

.BlockSizer1, .BlockSizer2, .BlockSizer3 {
float: left;
text-align: left;
}

.BlockSizer1 {
Width: 100%;
}

.BlockSizer2 {
width: 49%;
}

.BlockSizer3 {
width: 33%;
}
#ContactForm {
Padding: 5px;
}

#ContactForm span {
width: 49%;
padding: 5px 0 0 0; 
display: inline-block;
}

#ContactForm > .textarea {
width: 100%;
}

#ContactForm > .textarea textarea {
width: 98%;
Min-Height: 200px;
margin: 1em 0 1em 0em;
}

#ContactForm input {
width: 92%;
color: #999999;
outline: none;
padding: 10px;
Border: 1px solid #a0a0a0;
}

.ContactFormButton, .ContactFormButton input {
Width: 100% !important;
}

@Media screen and (max-width: 1000px) {
div.ContactForm, div.ContactFormRight {
width: 100%;
Margin: 5px 0;
float: none;
padding: 0;
}
}

textarea.ContactForm {
width: 100%;
padding: 10px;
Min-Height: 200px;
}

html css

Answer 1

Answer №1

take a look at this code snippet to update your media query

<style>
    .Block {
        width: 100%;
        background-color: #edeeef;
        padding: 50px 0;
    }

    .Block:nth-of-type(odd) {
        background-color: #ffffff;
    }

    .Block:After {
        content: '';
        display: block;
        clear: both;
        overflow: hidden;
        Zoom: 1;
        height: 0;
    }

    .BlockWrapper {
        text-align: center;
        Max-Width: 60%;
        margin: 0 auto;
    }

    .BlockSizer1, .BlockSizer2, .BlockSizer3 {
        float: left;
        text-align: left;
    }

    .BlockSizer1 {
        Width: 100%;
    }

    .BlockSizer2 {
        width: 49%;
    }

    .BlockSizer3 {
        width: 33%;
    }

    #ContactForm {
        Padding: 5px;
    }

    #ContactForm span {
        width: 49%;
        padding: 5px 0 0 0;
        display: inline-block;
    }

    #ContactForm > .textarea {
        width: 100%;
    }

    #ContactForm > .textarea textarea {
        width: 98%;
        Min-Height: 200px;
        margin: 1em 0 1em 0em;
    }

    #ContactForm input {
        width: 98%;
        color: #999999;
        outline: none;
        padding: 10px;
        Border: 1px solid #a0a0a0;
    }

    .ContactFormButton, .ContactFormButton input {
        Width: 100% !important;
    }

    textarea.ContactForm {
        width: 100%;
        padding: 10px;
        Min-Height: 200px;
    }

    @media screen and (max-width: 1000px) {
        div.ContactForm, div.ContactFormRight {
            width: 100%;
            Margin: 5px 0;
            float: none;
            padding: 0;
        }

        .BlockWrapper {
            width: 100%;
        }

        .BlockSizer2 {
            width: 100%;
        }

        #ContactForm span {
            width: 100%;
            padding: 5px 0 0 0;
            display: inline-block;
        }

    }

</style>

<div class="Block">
    <div class="BlockWrapper">
        <div class="BlockSizer2">
            <form ID="ContactForm" action="#" method="post">
                <h1>Contact Me</h1>

                <p>Lorem ipsum primis in faucibus. Praesent faucibus massa elit, vitae ultrices libero dapibus nec.
                    Maecenas cursus rutrum odio ut convallis. Curabitur viverra est in diam tincidunt, nec tincidunt
                    tortor dapibus.</p>
                <span><input type="text" name="Name" placeholder="Name" required=""/></span>
                <span class="ContactFormRight"><input class="" type="text" name="Subject" placeholder="Company Name"
                                                      required=""/></span>
                <span><input type="email" name="Email" placeholder="Email" required=""/></span>
                <span class="ContactFormRight"><input type="text" name="Phone" placeholder="Phone" required=""/></span>
                <span class="textarea"><textarea name="Message" placeholder="Message..." required></textarea></span>
                <span class="ContactFormButton"><input type="submit" value="Submit"></span>
            </form>
        </div>
        <div class="BlockSizer2">

        </div>
    </div>
</div>

https://i.sstatic.net/mVaCI.png

https://i.sstatic.net/AYUZ8.png

Answer 2

take a look at this code snippet to update your media query

<style>
    .Block {
        width: 100%;
        background-color: #edeeef;
        padding: 50px 0;
    }

    .Block:nth-of-type(odd) {
        background-color: #ffffff;
    }

    .Block:After {
        content: '';
        display: block;
        clear: both;
        overflow: hidden;
        Zoom: 1;
        height: 0;
    }

    .BlockWrapper {
        text-align: center;
        Max-Width: 60%;
        margin: 0 auto;
    }

    .BlockSizer1, .BlockSizer2, .BlockSizer3 {
        float: left;
        text-align: left;
    }

    .BlockSizer1 {
        Width: 100%;
    }

    .BlockSizer2 {
        width: 49%;
    }

    .BlockSizer3 {
        width: 33%;
    }

    #ContactForm {
        Padding: 5px;
    }

    #ContactForm span {
        width: 49%;
        padding: 5px 0 0 0;
        display: inline-block;
    }

    #ContactForm > .textarea {
        width: 100%;
    }

    #ContactForm > .textarea textarea {
        width: 98%;
        Min-Height: 200px;
        margin: 1em 0 1em 0em;
    }

    #ContactForm input {
        width: 98%;
        color: #999999;
        outline: none;
        padding: 10px;
        Border: 1px solid #a0a0a0;
    }

    .ContactFormButton, .ContactFormButton input {
        Width: 100% !important;
    }

    textarea.ContactForm {
        width: 100%;
        padding: 10px;
        Min-Height: 200px;
    }

    @media screen and (max-width: 1000px) {
        div.ContactForm, div.ContactFormRight {
            width: 100%;
            Margin: 5px 0;
            float: none;
            padding: 0;
        }

        .BlockWrapper {
            width: 100%;
        }

        .BlockSizer2 {
            width: 100%;
        }

        #ContactForm span {
            width: 100%;
            padding: 5px 0 0 0;
            display: inline-block;
        }

    }

</style>

<div class="Block">
    <div class="BlockWrapper">
        <div class="BlockSizer2">
            <form ID="ContactForm" action="#" method="post">
                <h1>Contact Me</h1>

                <p>Lorem ipsum primis in faucibus. Praesent faucibus massa elit, vitae ultrices libero dapibus nec.
                    Maecenas cursus rutrum odio ut convallis. Curabitur viverra est in diam tincidunt, nec tincidunt
                    tortor dapibus.</p>
                <span><input type="text" name="Name" placeholder="Name" required=""/></span>
                <span class="ContactFormRight"><input class="" type="text" name="Subject" placeholder="Company Name"
                                                      required=""/></span>
                <span><input type="email" name="Email" placeholder="Email" required=""/></span>
                <span class="ContactFormRight"><input type="text" name="Phone" placeholder="Phone" required=""/></span>
                <span class="textarea"><textarea name="Message" placeholder="Message..." required></textarea></span>
                <span class="ContactFormButton"><input type="submit" value="Submit"></span>
            </form>
        </div>
        <div class="BlockSizer2">

        </div>
    </div>
</div>

https://i.sstatic.net/mVaCI.png

https://i.sstatic.net/AYUZ8.png

Answer 3

Answer №2

Here is a revised and cleaner edition, addressing the span problem :

.Block {
width : 350px;
margin : auto;
margin-top : 25px;
}

#contactform .flex {
display : flex;
justify-content : space-between;
margin-top : 15px;
}

#contactform .flex input {
width : 47%;
height : 35px;
padding : 5px;
}

#contactform textarea {
width : 100%;
height : 100px;
margin-top : 15px;
}

#contactform #submit {
display : block;
margin : auto;
margin-top : 15px;
width : 100%;
height : 35px;
cursor : pointer;
}

<div class="Block">

<h1>Contact Me</h1>
<p>Lorem ipsum primis in faucibus. Praesent faucibus massa elit, vitae ultrices libero dapibus nec. Maecenas cursus rutrum odio ut convallis. Curabitur viverra est in diam tincidunt, nec tincidunt tortor dapibus.</p>

<form id="contactform" action="#" method="post">

<div class="flex">
<input type="text" name="Name" placeholder="Name" required />
<input type="text" name="CompanyName" placeholder="Company Name" />
</div>
<div class="flex">
<input type="text" name="Email" placeholder="Email" />
<input type="text" name="Phone" placeholder="Phone" />
</div>

<textarea name="Message" placeholder="Message..."></textarea>

<input id="submit" type="submit" value="Submit"/>

</form>

</div>

Answer 4

Here is a revised and cleaner edition, addressing the span problem :

.Block {
width : 350px;
margin : auto;
margin-top : 25px;
}

#contactform .flex {
display : flex;
justify-content : space-between;
margin-top : 15px;
}

#contactform .flex input {
width : 47%;
height : 35px;
padding : 5px;
}

#contactform textarea {
width : 100%;
height : 100px;
margin-top : 15px;
}

#contactform #submit {
display : block;
margin : auto;
margin-top : 15px;
width : 100%;
height : 35px;
cursor : pointer;
}

<div class="Block">

<h1>Contact Me</h1>
<p>Lorem ipsum primis in faucibus. Praesent faucibus massa elit, vitae ultrices libero dapibus nec. Maecenas cursus rutrum odio ut convallis. Curabitur viverra est in diam tincidunt, nec tincidunt tortor dapibus.</p>

<form id="contactform" action="#" method="post">

<div class="flex">
<input type="text" name="Name" placeholder="Name" required />
<input type="text" name="CompanyName" placeholder="Company Name" />
</div>
<div class="flex">
<input type="text" name="Email" placeholder="Email" />
<input type="text" name="Phone" placeholder="Phone" />
</div>

<textarea name="Message" placeholder="Message..."></textarea>

<input id="submit" type="submit" value="Submit"/>

</form>

</div>

Input Fields Will Not Resize Correctly in Some Browsers

Answer №1

Answer №2

Similar questions

Tips for preloading a small placeholder image before the main content is loaded

Changing the alignment of divs to center instead of the right side

pre-iframe loading function

Ways to have the "li" element displayed on a separate line

Interactive element for initiating a HTTP request to NodeJS/Express server to trigger a specific function

Is there a way to turn off the ripple effect on Material UI Input components?

Enhancing images by creating clickable sections in a more organized and efficient manner

Steps for creating a fade effect between two different elements when the mouse is interacting with one of them

Styling errors in AngularJS validation code

Eliminating the bottom border of all buttons, except for the last three buttons in the list, solely using pure JavaScript, unless alternative methods are available

Prevent the rendering of HTML in the combobox dropdown menu

In JavaScript, alert a message once all images have been clicked

Inquiries regarding the formatting of HTML tables

Rotating an input 90 degrees within a div for unique positioning

Ways to contrast HTML without considering whitespace?

Ways to showcase JSON data with jQuery

Using a for loop in JavaScript to dynamically generate HTML content within a Django project

Issue: The value of an object is not defined (evaluating '$scope.inputcode.password')

Is it possible to reset the text within the text box when the form is being submitted using the load() ajax function?

Exploring the benefits of utilizing Scoped CSS for individual components within Next.js version 13