Dropdown Text Size Changes but does not remain

Store Design
,
1

Hi, I have added the below code to the theme.liquid to increase the font size of variants in a dropdown menu on the product page. When I go to view the changes the size of the dropdown changes perfectly, however, it only remains for a few seconds before it goes back to a small text. To see an example, a link to the page is below. Can someone help?

Here is the syntax I used:

{% if template contains ‘product’ %}

.product-form__input.product-form__input--dropdown select { font-size: 20px; }

{% endif %}

And the link to one of the products in my store

https://www.rdrewnaturals.com/collections/feminine-care/products/foam-wash

2

Hi @RDNaturals ,

What’s input select you want change text size

3

Hi @RDNaturals

The class product-form__input–dropdown that you have added to the css does not exists on the product page.
You can add the following css to increase the font size of your variant dropdowns in the product page.

Let me know if it works. Thanks.

4

Hi @RDNaturals

Do you mean this one?

Made4uoRibe_0-1721238155102.png
Made4uoRibe_0-1721238155102.png499×219 6.96 KB

if it is check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.selector-wrapper select {
     font-size: 20px !important;
}
  • And Save. If you like to adjust also the option.
.selector-wrapper option {
     font-size: 20px !important;
}
  • if both of theme.
.selector-wrapper option, .selector-wrapper select {
     font-size: 20px !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

This worked, thank you very much