CSS class for columns not working

I’m also having trouble with this particular CSS code for the email input field:

div.wpforms-container-full .wpforms-form input[type=email].wpforms-field-email-primary {
height: 30px;
}

It doesn’t seem to edit the form field for emails.

Any suggestions?

Thanks!

Hi kermitt,

It looks like there might be a styling conflict that is preventing the multi column styles from working. To fix this, please try the following custom CSS:

div.wpforms-container-full .wpforms-form .wpforms-one-half {
    clear: none !important;
}

To style the email input field, please try:

div.wpforms-container-full .wpforms-form input[type=email] {
    height: 30px !important;
}

In case it helps, we have a tutorial on how to add custom CSS to your site.

I hope this helps ??

Those worked, thanks!!

Can you also give me a code to make the “simple” one box name field 30px in height? The selectors in the documentation only work for first, middle, last.

And if I have to use the first name, last name option, can I also get a code to make those two in-line fields stack up vertically on mobile? The CSS class wpforms-mobile-full does not work for it.

Thank you!

Hi kermitt,

To adjust the height of the name field, please try the following CSS:

.wpforms-field-name input {
    height: 30px !important;
}

To display a native two-column field as full width on mobile, please try the following CSS:

@media only screen and (max-width: 600px) {
.wpf-mobile-custom .wpforms-field-row-block {
	float: none !important;
	margin-left: 0 !important;
	width: 100% !important;
	}
}

I hope this helps ??

Hi Ethan,

Thanks for the code!

The name input field code worked but the second code for the mobile didn’t.

Any other ideas?

Thanks again.

• This reply was modified 5 years, 8 months ago by Kermitt.
• This reply was modified 5 years, 8 months ago by Kermitt.

Hi Kermitt,

I apologize that I’ve overlooked to mention: for the second code to apply to your form field, you’ll need to add the class wpf-mobile-custom to the CSS Classes setting of those fields, as seen in this screenshot.

I hope this helps ??

Hi Ethan,

Yes, that worked!

Thanks a lot for your help ??