Simple Font Size Change In Css Keeps Getting Overrriden

Hi, I'm wodering if someone could help with what is seemingly a simple change:

In the main CSS I can see the following code:

ul.dropdown-multicolumns li a.drop,
ul.dropdown-multicolumns li.nodrop a {
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
font-style: normal;
text-decoration: none;

I would like to change the font size to 15px so I added in My Changes:

ul.dropdown-multicolumns li {
font-size: 15px;

but it doesn't seem to work (see attached).

I also tried:

ul.dropdown-multicolumns li a.drop,
ul.dropdown-multicolumns li.nodrop a {
font-size: 15px;
text-transform: capitalize;

but the font size is always overridden and stays at 14px.

Can you help?



What version are you using?

Hi, it's 4.1.1.

Other CSS changes are picked up correctly, e.g. margin changes etc, but this one seems to be overriden.

Thank you.


Try to use this line instead of yours:

font-size: 15px !important;

Sincerely yours,


Amazing. That worked!

Thanks for your help.

If you put the CSS into the custom css area of the theme/layout or in the css file for the layout (same place in reality) rather than using my_changes then it will work as expected without the !mportant tag.

For CSS only changes you don't really need my_changes anymore.