Label above inputfield

Giudo,

If you can’t see the labels in firefox it’s usually because there is something in the theme over-riding the plugin CSS. It;’s usually a line height style set in pixels.

Not really possible to have the labels above the field as the current layout is built into the core of the plugin.

Graham

Hi Graham,

Thanks for your response, but also with option using style from plugin this stays the same. So somehow style of template is overruling style of plugin I guess. I’m using this one btw: https://bloggingexperiment.com/best-theme

Guido

Morning Guido,

Some theme desighers still insist on setting font sizes and line heights in pixels. This causes so many problems. The theme you have chosen has a line-height of 18px. The input fields for the contact form have a 6px padding and a 1 pixel border – a total of 14px. Leaving just 4px for the label.

If you look at the form on the 2013 wordpress theme it’s fine.

One solution is to use the custom CSS and reduce the padding on the input fields to zero. Or find a theme that is truly responsive.

However I am looking into the problem – but haven’t found a good solution yet.

Graham

Morning to you too Graham :-),

Thanks again.
But how can I create the same inputfields without using padding?

Guido

Using the plugin custom CSS box try this:

.qcf-style input[type=text], .qcf-style textarea, .qcf-style select, .qcf-style #submit {padding: 0;}

Or edit the theme CSS and delete the line-height:18px styles.

Do you have an idea how to reach the same height as before, but without using ‘padding’? I can use ‘height’ but than text is not in middle of inputfield :-(.

Or use a combination of ‘height’ and ‘padding’?

Guido

It’s the line height in the theme that is always going to be a problem. People zoom in and out and do all sorts of weird stuff. If you remove the line height from the theme CSS you are actually making it more responsive.

Or you could try using line-height: 100%; in the plugin custom css. More info her: https://www.w3schools.com/cssref/pr_dim_line-height.asp

No further responses so marking as resolved