Question 239147 in Html Question posted in
Some basic documentation can be found here.

Html – Font-size becomes too big when browser width is reduced

I am having a hard time with responsive text sizes:

<header class="toolbar">
    <h1>TITLE</h1>
</header>

I have font-size:2.4rem. The font-size is perfect for laptop browser but it looks very small on my mobile phone browser. I realized that I need atleast 4rem for mobile browsers. So to handle that, I implemented media query:

@media screen and (max-width:1000px) {
            h1 {
                font-size:4.4rem;
            } 
        }

But when I reduce width of my laptop browse (<1000px), it works counter-intuitively because font-size increases to 4.4rem & look too big on laptop screen.

I tried viewport units (font-size: calc(7px+0.5rem)) but that didnt work either.

Tags:

2

Answers


  1. 0

    Perhaps this will help: https://www.w3schools.com/css/css_rwd_viewport.asp

    If you don’t include this then the font will get bigger as the width increases:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    If you do include it, then the font will (mostly) remain the same size regardless of width.

    Because you haven’t included a full page example, I don’t know if you’re already doing this, so I had to at least cover it.

    Login or Signup to reply.
  2. 0

    Try adding this css :

    html {text-size-adjust:none;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;}

    or

    html {text-size-adjust:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search