Why is some devices NOT listening to my media query when the device width is smaller than "375" which is my smallest breakpoint. I use @media (min-width: 375px) { // Rules here }... I get that it "requires" that the device has to be at least "375px" wide, but I can't figure out what's wrong here. It works when I change the 375-breakpoint to 0px... But is that even a correct approach?
In my "media.scss" file, I've it all set up like this:
@media (min-width: 375px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1280px) {}
Everything works fine, but when testing on a device that is smaller than 375 pixels, it doesn't consider the rules. I hope you get what I mean. I've looked how bootstrap has their media queries, and I can't really tell if there is any difference.
No matter if you use the mobile-first or desktop-first approach, you need some styles that apply when none of the media queries apply. In your example, there are no styles which apply for widths below 375px. Most likely it would be okay if you simply take the CSS rules you have inside the first query (<375) out of that query and put it at the very beginning of the stylesheet.
Or said differenty: Just erase the @media (min-width: 375px) { at the beginning and its closing } bracket, then those styles will apply to all widths below 768px (also to those narrower than 375px)