How to change the drop down menu font on products page for mobile

Hi there, 

Cant seem to find a way to reduce the font size in the drop down menu on my products page for mobile. On the desktop the font size looks great but when I switch to mobile view the font size is very big. Is there a way I can reduce the size just on the mobile version? 

Thanks for the help!

Below is the desktop view, which looks fine, everything fits.

Below is mobile view and the font size is too big, would be great to have size and price on the same line.

1 hour ago, LM_91 said:

Hi there, 

Cant seem to find a way to reduce the font size in the drop down menu on my products page for mobile. On the desktop the font size looks great but when I switch to mobile view the font size is very big. Is there a way I can reduce the size just on the mobile version? 

Thanks for the help!

 

Below is the desktop view, which looks fine, everything fits.

Below is mobile view and the font size is too big, would be great to have size and price on the same line.

 

Can you share your site with site-wide password so we can take a look?

Absolutely, the website is: www.gatewaycollages.com

Appreciate the help!

3 hours ago, LM_91 said:

Absolutely, the website is: www.gatewaycollages.com

Appreciate the help!

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
div.variant-option option {
    font-size: 12px !important;
}
}

Hi Tuanphan, 

Thanks for your help - I tried plugging in this code into the Design > Custom CSS but still the font size hasn't changed on the mobile version. I am changing the font sizes (12px and lower) and then refreshing the page on my phone and nothing has changed...not sure why that is. Below is a screenshot of the code with a font size of 5px and then a screenshot of how the font looks on the mobile. 

21 minutes ago, LM_91 said:

Hi Tuanphan, 

Thanks for your help - I tried plugging in this code into the Design > Custom CSS but still the font size hasn't changed on the mobile version. I am changing the font sizes (12px and lower) and then refreshing the page on my phone and nothing has changed...not sure why that is. Below is a screenshot of the code with a font size of 5px and then a screenshot of how the font looks on the mobile. 

 

 

 

 

 

Try adding new code to Settings > Advanced > Code Injection > Header

<style>
  @media screen and (max-width:767px) {
div.variant-option option {
    font-size: 12px !important;
}
}
</style>

Unfortunately putting this code to Settings > Advanced > Code Injection > Header still doesn't change the font size for mobile.