Contact form mobile error

ciao @myszwa,

it’s related to the stylesheet. take a look ate style.css line 129:

#veryspecial{
    background: #bebebe;
    color: #ffffff;
    border:none;
    line-height:30px;
    width:300px;
....
}

in this way you are forcing the input width to be always 300px (even when it cannot)

you should do this:

#veryspecial{
    background: #bebebe;
    color: #ffffff;
    border:none;
    line-height:30px;
    width:100%;
    max-width:300px;
....
}

hope it helps!

ps take a look at the difference between id and class in css. my advice is to define a class that gives to all inputs/textarea the basic style and then (if you need) you can add other customizations hooking on the id or to another class. please ask into WordPress customization forum about this. will be very useful to you!

Thanks for your advice. I changed the id on class and set the max-width and unfortunately the problem still occurs . This is very embarassing . How can i fix it?

In addition I note that problem occurs on mobile firefox ,chrome,opera . On the iOs mobile everything is fine :(.

hi @myszwa

take a look at this, it’s the copy of your form
https://codepen.io/erikyo/pen/gOmEXEW

you shouldn’t style element by element because it will becomes unmanageable. try to find the attributes that the inputs have in common instead and merge them all in one class, you can use multiple classes if an element needs more than one “group” of attributes

• This reply was modified 3 years, 5 months ago by Erik. Reason: tag changed