On the newer side of web development. Using CSS Grid with some flexbox. Any idea on why my 768px media query styles are overwriting my 320px styles?

I was breaking into modules but moved everything to a single css file until I figure out what causes the issue. The mobile styles are at top and I started the medium breakpoint below the initial styles.

Designed it mobile first if that makes a difference. Should the media queries be nested?

Are you using max-width?

@Bennerant in the media query statement? Using min-device-width only.

I’m only going for 3 breakpoints ( mobile, medium at 768px, and then one for desktops)

In various selectors I’m using max-width for styling purposes, typically different containers.

Do you have your code somewhere online?

@Bennerant I’ll put it up for you.

Without reading the css, it's difficult.
Usually it's because min-with 360px satisfies both media queries, and if the specificity it's the same, last one wins. Check the computed rules on an inspector and see how they are applied or unapplied, and the reason why.

@Nilo-jxn are you writing mobile first?
You write the css for mobile, and then add min-width query for the next size

So you’d have something like this

#element {
width: 100%;
}

@media only screen and (min-width: 768px) {
#element {
width: 50%;
}
}

@media only screen and (min-width: 1024px) { // or whatever you define desktop width as
#element {
width: 33.3333%;
}
}

God, wrote this on a phone...

can't you use vmin, vmax, vh, vw ?

Hey guys, the girlfriend pulled me away.
Here's a link if someone wants to take a peek. I'm fairly new so excuse me if it's too messy. For my issue I've consolidated most of it to the single 'main.css' file.

https://github.com/nilo-jxn/...

@ChainsawBaby although have have a specific breakpoint for mobile in the current code, when I originally tried it, I didn't specify the mobile breakpoint since I decided to do mobile first. I later added it in thinking it might be the reason that the medium breakpoint was overwriting the mobile styles.

Your media query for 768px is using min-device-width instead of min-width.

That means that your 768px mq is constantly active if the device screen is wide, it does not care if you resize the browser window.
So on your laptop you will not be able to preview your mobile styles by resizing the browser, you’ll have to emulate a smaller screen device!

Switch to min-width and your confusion shall end!

Fixed! I wasn’t specifying a max-width for my smaller breakpoint so both were always true and my medium breakpoint was taking precedence.

@jiraTicket we commented at the same time! Thanks for the help anyway though and for taking the time to look it over.

I always use min-width for my mediaqueries as a default.
rarely ever use min-device-width.

usually it just results in unexpected results when viewing on a wide screen with a narrow browser window.

@jiraTicket ahh okay. Thanks for the tip!