Rem value in a media query

1

I am trying to use rem values in a media query. My goal is to have the font-sizes of my header and navbar change when the page crosses the 768 pixel-mark. For some reason, it’s just not working. Here is the website I have been following along with:https://www.freecodecamp.org/news/learn-responsive-web-design-in-5-minutes/

Here is my codepen: https://codepen.io/danoneil09/pen/RwWGvyZ

Thanks for the help!

2

You’re not seeing the change because you have your media query at the top and even though you minimize the screen what’s in the media query is getting overwritten by what follows.
Follow along with the website but move your media query so it’s the last thing and you’ll see the results you’re expecting.
Remember the C in CSS means cascading.

3

Thank you for your response @Roma. When I place a media query that decreases all the font sizes at the end, it works. However when I place the media query that utilizes rem (the recommended method) at the end, it still does not work. Any suggestions?https://codepen.io/danoneil09/pen/RwWGvyZ

4

@Roma. I figured it out finally. I had:
html {
font-size: 14px;
}
standing alone in my css, and it seemed kind of redundant to me to have that in CSS twice (once alone, and again in the media query. I removed this, and problem solved!

1 Like