CSS media query for small screen overwriting media query for large screen

Question

enter image description here

As you can see in the image I have written a query for a screen with a width of 768px but the query I wrote for a device with a width of 375px is getting applied.

enter image description here

I tried using max-width but I would have to rewrite it again for all device widths which would be time consuming. I made sure to add them in order from highest pixel width to lowest pixel width after the general css.

Answer 1

you are using two media queries with only min-width boundary

• @media screen and (min-width: 768px) {...} lets call it desktop
• @media screen and (min-width: 375px) {...} lets call it mobile

if these block should applied only on distinct resolutions, use min and max with 1 pixel difference:

• desktop @media screen and (min-width: 768px) {...}
• mobile @media screen and (max-width: 767px) {...}