Decrease Font Size of Select Values on Mobile

Get Help
,
1

We can’t seem to figure out how to decrease the font size of the different dropdown options on mobile. All of the CSS targeting we have found is for the dropdown placeholder and not applied when you click the dropdown itself at which point the phone’s default styling seems to take over. Essentially the options are very long (in terms of character count) and getting cut off on mobile.

Any help would be much appreciated!

2

Can you share a link to the page on your site where we can see the form, and let us know which field it is? Thank you

3

https://careers.heavyequipmentcollege.com/

It is a conditional select field that appears after you choose an option from “Choose your campus” which is the 8th field down on the form. There are technically 3 different fields that each appear depending on your answer to “Choose your campus.” All of them have super long options for the program names that the client insists on.

4

It looks like your theme stylesheet is making those select options 17px with this CSS:

@media (max-width: 767px)
body {
    font-size: 17px;
    line-height: 1.45;
}

You can override that on mobile with more specific rules, like this:

@media (max-width: 767px) {
	body .gform_wrapper select option {
		font-size: 12px;
		line-height: 1.0;
	}
}

You may need to tweak that somewhat but that should help. See this article for where to add the CSS:

Or you can add it using the Customizer (Appearance > Customize > Additional CSS).

1 Like
5

Hey Chris,

Thanks so much for getting back to me! We tried implementing the CSS you suggested and tweaked it at different font sizes and added !important but we can’t see any changes on mobile.

Here is what we have now:

@media (max-width: 767px) {
body .gform_wrapper select option {
font-size: 8px !important;
line-height: 1.0;
}
}

It appears that on mobile the phone’s default styling takes over. So this isn’t really an issue on Android because they will break a long select option up into multiple lines. However, on an iPhone, the text gets cut off once you click the select field.

We can control the placeholder text size easily as well as the size of the select option once it has been chosen.

6

I’d recommend opening a support ticket for this issue:

https://www.gravityforms.com/open-support-ticket/

7

Okay - thanks for your help!