Okay, I know I’m probably missing something tiny here but I’m trying to add a media query to resize my h1 text when the viewport goes beow a certain width. I have a couple of problems.
- It’s not working (I could probably tolerate the other problem if it were and rework my design around it).
- It is however breaking my page appearance even at fullwidth. I’ve forked my code to show the problem.
-
This is what it should look like. http://codepen.io/Shutsumon/full/gWpmKv/
-
This is what it actually looks like http://codepen.io/Shutsumon/full/PmGxdB/
Literally the only difference should be the media query.
The odd thing is the further down the css I put it the less the appearance breaks (and it still doesn’t work). Move it up the page and the background gradient vanishes too. I know position in the css effects what rule overrides what but why is it overriding anything except the font, especially when the viewport is too large to trigger it?
I’m wondering if there is something seriously wrong with my navbar code because I can’t get scrollspy to work either, (Though that wouldn’t explain the gradient thing I mentioned above…)
Thanks for any help,
Becky