Do more on the web, with a fast and secure browser!

Download Opera browser with:

  • built-in ad blocker
  • battery saver
  • free VPN
Download Opera

CSS Font-size not changeable on Opera Mini Extreme mode

  • I'm building a mobile website for the Nigerian market, and I understand that over 73% of Nigerians use opera mini, a lot of them on Extreme mode. However when I declare my css

    font-size: 12px or font-size 19px;

    The font size does not change on extreme mode and all the fonts sizes are the same on the entire website. So I can't achieve text hierarchy and the web page looks ugly and broken for the users.

    How can I fix this? This is a very big problem for me, and I can't find any information about this anywhere online.

    Is there any known workaround or fix?

  • Allowed font sizes are indeed trimmed to some subset (which may vary between devices). In normal case you should see a difference between 12 and 19px though... Don't you have "Single column view" enabled in settings? If this is the case, then very likely page layout (including font sizes) is pretty broken.

    If text hierarchy is really important to emphasize in your case, then you have few options:

    • try wider scale of font sizes, maybe just this 12 and 19px was an unfortunate pick,
    • use color scale to achieve hierarchy,
    • use bold text to emphasize text that would normally be slightly bigger.

    If you care more about your website looking great, then you need to understand that typically websites look slightly worse in Opera Mini and our users are often used to this. If your page is readable and usable in Opera Mini, but doesn't look great, maybe that's still enough?

    In any case, please note that the same page might render in different way on different devices. Especially we are working on font rendering in new clients, so actually this part might change soon (you might have a look at your page using Extreme mode in Opera Mini beta).