I’m trying to apply custom CSS to the mobile view of my form.
I’ve tried the following (see below), but the mobile view is still showing the custom CSS properties for desktop. Probably a silly newbie mistake, but I’d appreciate any help in figuring this out!
@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
#lp-pom-form-402 {
height: 34px !important;
font-size: 16px;
}
}
Hello,
If you are just making simple size changes you shouldn’t need custom CSS.
You can make edits in the mobile-page-editor without it affecting the desktop form.
I’d prefer to use custom CSS as page editor was too limited for what I wanted to style (limit in form height, styling input/placeholder text, etc).
+2
Hi @bryw!
There will be a bit more to this than just selecting the form and assigning it height, font-size, etc. There are several more elements at play here.
As an example; height is determined by container spacing and field height. For font-size, you will also need to be more specific (are you wanting to change the field labels, radio button labels, field attributes, errors?)
As Kyle mentioned, a lot of these you can change in the mobile editor, and it won’t change on the desktop.
If you are still interested in learning more, I would start by investigating the in the developer tools in your browser.
Here is a link to get you started on place holder text:
When beginning to step out of the box it can be much trial and error! Don’t forget about UB’s Job Board where lots of people are ready to help assist!
Good luck!
No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.