I can't set the font size for an element

Hi there guys, if you go here: http://www.klayz.com/community and you scroll down you see that the navbar is appended to top. Now I want to change that navbar font size exclusively for users who view the page and have a resolution of 1280x800 or less. How can i do it? Note that now if I try to change its font size normally, it doesn’t work either. I also tried with !important, but nothing.

A simple media query targeting .vbmenu_control should do it.

@media screen and (max-width: 1280px) {
   .vbmenu_control {}
}
1 Like

Thank you Sam! That did the trick but I used this instead:

@media screen and (max-width: 1280px) {
section.sticky td {
    font-size: 9.7px;
}
}

Thank you again! :slight_smile:

That could be rally huge or microscopic depending on the browser settings (which you have no control of). Setting font sizes relative to other font sizes (using em) or relative to the viewport size (using %) will give you greater control over the font sizes compared to using pixels.

2 Likes

I changed it to 0.60625em, using this online converter: http://www.w3schools.com/tags/ref_pxtoemconversion.asp
9.7px = 0.60625em.
Thank you a lot for your suggestion, felgall!

or 9.7px = 1000em
or 9.7px = .000001em

or anything else - there is actually no relationship whatever between px and em as they are measuring based on two completely unrelated things.

The “converter” you used probably assumed 1em = 16px but 1em can be any size from .00000001px through 100000000px and beyond depending on the size of the pixels, the zoom level and numerous other factors.

1 Like

Last update (I hope!). I changed it to 70% and now I have no problems. Before I had problem that is was really too small.
Thank you again felgall!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.