Why does font-size affect the size of the image?

HTML-CSS
1

Hello everyone,

I don’t understand why the font-size (when changed) affects the image. This is a basic website for my friends band and I’ve been trying to make it responsive, but when I change the font-size in nav a the logo image gets smaller.

Here is what I have so far.

https://codepen.io/luccarizzi/full/BazjRgz

What I want to accomplish is a bigger font for the nav when the viewport is bigger than 800px.

2

It looks like you have the images sized by percent. When the font size is bigger, that will make the container bigger. If the image is in that container, it will be bigger too because it is a percent of the container.

3

Understood. But how could I fix this? I want the font to be bigger but not affecting the size of the image? I tried using view-width instead of percentages but it didn’t work.

4

Plus, the image is in its own container div class="logo" and the nav is a separate container. Would that be enough for one not to affect the other?

5

Try using pixels values (px). That might fix the problem.