Search code examples
htmlcssresponsive-designresponsivefont-size

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.

Solution

  • 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.