Why would using a media query to change fontsize on smaller viewports competely override styles on the header of my portfolio page?

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.

  1. It’s not working (I could probably tolerate the other problem if it were and rework my design around it).
  2. It is however breaking my page appearance even at fullwidth. I’ve forked my code to show the problem.

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? :confused:

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

You are keeping your media query open without the closing curly brace so it is applying all of the css you have below it as styling for the media query. Your media query should have its own styling for the elements when the window is at the specified size. right now you just have

@media (max-width: 300px) {

but your query should be

@media (max-width: 300px) {
  //syling you want in here
} <-- close it, think of it as being similar to the structure of a function.

This way, when the window is at 300px width, whatever styling is within the media query will be applied to your specified elements.

1 Like

:flushed: Gah! I should have spotted that. Thanks! The layout is no longer broken. :slight_smile:

But the font is still not changing size at the break point? Any idea why that should be?

The h1 (your name in the nav) that you have within the media query? It’s changing down to 25px at 300px on my end.

Okay, maybe I have a caching problem or firefox is being a pain.

I shall poke it a bit.