When window is resized, span element not getting its width

Question

Here's the screenshot:

And here's the code:

.contact_section .contact_form input[type="text"], .contact_section .contact_form input[type="email"]{
    border: 1px solid black;
    margin: 15px 0;
    font-size: 16px;
    padding: 3px 5px;
    text-align: center;
    width: 30.2%;

    display: inline;

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.contact_section .right_box{
    float: right;
    width: 500px;
}

.contact_form .wpcf7-form-control-wrap:nth-of-type(2){
    margin: 0 5px;
}

@media screen and (max-width: 510px) {
    .contact_section .contact_form input[type="text"], .contact_section .contact_form input[type="email"]{
        margin: 5px auto;
        display: block;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .contact_form .wpcf7-form-control-wrap:nth-of-type(2) {
        margin: 0;
    }
}

The problem is that, at normal window size, it looks perfect as shown in the screenshot. But if resize the window(to less than 510px) and back to the full size window, the email textbox goes to the next line!

Here's the screenshot:

What I noticed is that, the parent <span> element now doesn't have a width! I have been trying to figure out why its happening, for many hours now. But still no success! :(

Btw, am using ContactForm7 for the contact form.

EDIT

SOLVED! I set the span elements to inline-block as well as set the 30.2% width to them instead of the textboxes. And some margin adjustments fixed the issue! Thank you

@RaniMorelesRubillos hmm the margins seems to be not the issue. Thank you — Vpp Man, Oct 18 '16 at 08:20
can you give me the link to your actual website or try to inline the span @Vpp Man — Rani Moreles Rubillos, Oct 18 '16 at 08:22

score 0 · Accepted Answer · edited May 23 '17 at 11:53

0

The CSS property display:inline does not accept widths and heights. Change this to inline-block to solve your issues.

.contact_section .contact_form input[type="text"], .contact_section .contact_form input[type="email"]{
    border: 1px solid black;
    margin: 15px 0;
    font-size: 16px;
    padding: 3px 5px;
    text-align: center;
    width: 30.2%;

    display: inline-block;

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

Reference: display:inline resets height and width

edited May 23 '17 at 11:53

Community

1
1

answered Oct 18 '16 at 07:41

Fahad Sohail

1,818
4
21
33

Thank you. I set the `inline-block` as well as the `width` to the `span` elements and it seems to be working now. – Vpp Man Oct 18 '16 at 08:20

When window is resized, span element not getting its width

1 Answers1