In order to make the text responsive, I decided to write all the font-sizes in rem. However, when I wanted to change the html font-size by a media query, it doesn’t work. It doesn’t change, and it still stays the same font-size as if the media query didn’t do anything. The original font-size for html, I wrote in px.
It started working when I changed font-size for html to vw.
Why is that? Thank you very much!
You’ll need to share your CSS with us so we can see what you did. If you have your project in a public place where we can see it then you can provide a link. Otherwise, you can paste your CSS in here.
To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.
Link to the html and css:
The thing to remember is that when two selectors have the same specificity then the order that they occur in the file will determine which one is applied. The last one in the file will win.
Media queries do not add to the specificity, it is like they are not there. So the last
html ruleset will win.
Hopefully that is enough of an explanation to help you figure out the solution.
Thank you! So it is the best practice to add media queries to the end of the css file?
The best practice is to create your default CSS first and then add media queries below those defaults. That doesn’t mean the media queries have to be at the very end of the file. Sometimes it is better to put them just below the default CSS, wherever that occurs in the file. But ya, in general they tend to hang out toward the end of the file.