Menu
I'm trying to understand why some texts gets smaller as the screen size gets smaller and other texts with seemingly same style stays the same.
I am trying to make my own navigation bar, and I want my text to stay the same size as the screen gets smaller (like how a bootstrap navbar does), but I can't seem to figure out how to do it. I check the source and I don't understand what attributes to use.
For example, I have two pieces of HTML that are almost the same, but the text sizing behavior is vastly different and I have no idea why.
With no styles, here's a body with text that stays the same size as the screen size decreases:
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
<h2>Resize the browser window to see the effect.</h2>
</body>
If I remove one of the paragraphs, or even just the h2, the text now becomes smaller as the screen size decreases, why is that?
Here are two codepens that shows the behavior I'm talking about. If you change the screen size using Chrome's device toolbar to test responsive design, you see that these two differents pieces of code shows text resizing to be behaving differently. Altough, if you only resize the browser itself and not use the Chrome's device toolbar, they behave the same? So maybe you can see how I'm getting confused:
https://codepen.io/mhlroy/pen/oVoyeN
https://codepen.io/mhlroy/pen/eXeKxX
Here's an example of a navigation bar I'm trying to have the text stay the same size as the screen size decreases, I want it to stay the same and I'll make the necessary adjustments myself with media queries and make the menu become an hamburger menu for example: https://codepen.io/mhlroy/pen/OqOEGO
All I want is for the text to stay the same size. I've seen some people mention using vh for the font-size. And I suppose I could use that, but trying it right now seems to make the text size go bigger as the screen size decreases, so I'm still not sure.
Any help shedding some light on this will be greatly appreciated!
Thank you.
395
asked Dec 28 '25 11:12
As arieljuod mentioned in the comments of my initial question, putting in
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> in the head fixes my issue.
Now it works more consistently and as I personally expected it, which is to not have the page be zoomed out when the screen size changes.
82
answered Dec 31 '25 07:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With