Windows 10 will reach EOS (end of support) on October 14, 2025. For more information, see this article.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Este fío arquivouse. Faga unha nova pregunta se precisa axuda.

Want to make UI larger; modifying layout.css.devPixelsPerPx makes UI scaling inconsistent across screens

  • 5 respostas
  • 1 has this problem
  • 333 views
  • Last reply by gal.gofrit

gal.gofrit
gal.gofrit
more options

Hey, I want to make the UI slightly larger; I have found that modifying layout.css.devPixelsPerPx in about:config works the way I need it to. However, when using multiple screens with different resolutions, the scaling no longer appears consistent between those screens. That would make sense (since it's a per-pixel configuration), but I couldn't any configuration option that only acts as a modifier for the standard scaling mechanism. I'm using macOS (10.15.7), Firefox 88.0. Attaching a screenshot taken from both screens together (not sure how macOS handles the difference in resolution when handling screenshots, there's definitely some magic going on with macOS screenshots in general; either way, it shows the problem really well).

Hey, I want to make the UI slightly larger; I have found that modifying layout.css.devPixelsPerPx in about:config works the way I need it to. However, when using multiple screens with different resolutions, the scaling no longer appears consistent between those screens. That would make sense (since it's a per-pixel configuration), but I couldn't any configuration option that only acts as a modifier for the standard scaling mechanism. I'm using macOS (10.15.7), Firefox 88.0. Attaching a screenshot taken from both screens together (not sure how macOS handles the difference in resolution when handling screenshots, there's definitely some magic going on with macOS screenshots in general; either way, it shows the problem really well).

Chosen solution

I have a global font setting (*) and 4 different tab classes. For tabs in particular, you could try this:

  1. tabbrowser-tabs .tabbrowser-tab. tab-content (followed by font-size) OR
  2. TabsToolbar #tabbrowser-tabs .tabbrowser-tab. tab-content
Ler a resposta no contexto 👍 1

All Replies (5)

gal.gofrit
gal.gofrit Question owner
more options

Screenshot here

Terry
Terry
more options

You can change font size and toolbar heights with a userChrome.css file; you may be able to change toolbar button sizes as well. Are you willing to try that? https://www.userchrome.org/how-create-userchrome-css.html

gal.gofrit
gal.gofrit Question owner
more options

Thanks, that's helpful - I manage to control the size of most of the toolbar sizes, but I can't change the tab titles' font sizes. Do you happen to know which CSS attribute controls that? Thank you

Terry
Terry
more options

Chosen Solution

I have a global font setting (*) and 4 different tab classes. For tabs in particular, you could try this:

  1. tabbrowser-tabs .tabbrowser-tab. tab-content (followed by font-size) OR
  2. TabsToolbar #tabbrowser-tabs .tabbrowser-tab. tab-content
gal.gofrit
gal.gofrit Question owner
more options

TerryN21 said
I have a global font setting (*) and 4 different tab classes. For tabs in particular, you could try this:
  1. tabbrowser-tabs .tabbrowser-tab. tab-content (followed by font-size) OR
  2. TabsToolbar #tabbrowser-tabs .tabbrowser-tab. tab-content

Hey, .tabbrowser-tab { font-size: ...px } seems to be the one working for me - thank you! :)