Multiple media queries not working

Get Help CSS
#1

So, I have been staring at and fiddling with this for hours and it’s driving me crazy. I’m working on adding media queries to a site I’m building. I have the first query working perfectly. However, as soon as I add the second query, nothing in it works. If I add the changes to the first query to test, they work just fine. However, nothing I put in the second query triggers no matter what. I’m sure I’m missing something obvious since I’ve been staring at it for too long. Any help is greatly appreciated. I’ve included the queries below.

@media only screen and (max-width: 1118px) {
	.brand {
		font-size: 3em;
	}
	
	nav a {
		font-size: 1.25em;
	}
}

@media only screen and (min-width: 100px) and (max-width: 425px) {
	.brand {
		font-size: 2em;
	}
	
	.cat-button {
		display: none;
	}
}
#2

Hi @therealpelance
I think there is nothing wrong with your code and when I paste it to fiddle it does what it should.
max-width: 425px ist just very small though and some browser windows on desktop can’t even be shrinked to such extent. Are you sure you had it as narrow as 425px or below?

#3

I was testing that size using Chrome Dev Tools. In Dev Tools it’s responding to the first query but not the second. What were you using to test?

#4

It works here:
Fiddle
as well as in Opera.
I can’t shrink the browser windows of Safari and Chrome to such extend and with the Chrome devtool it is indeed not working…

#5

That’s interesting. Thanks! I really appreciate it.

1 Like