CSS Media Queries Overriding Each other CSS Media Queries Overriding Each other wordpress wordpress

CSS Media Queries Overriding Each other


I agree with Birdman, and you should consider a mobile first approach. Mobile first, however, means that the smallest device size is completely outside of any media query. The next size up will start the first media query. You only ever need a min-width, as these new styles will be in addition to the base styles, not overwriting them. Each media query created will continue to combine with those already called.

And instead of worrying about iPad this, or tablet that... worry about when your design elements start to look bad. All of the major browsers have intelligent enough emulators to test in different device sizes.

Here is a good article on the pros and cons. I always code mobile first, and never worry about styles colliding, unless I do it on purpose :)

https://codemyviews.com/blog/mobilefirst


When a device width falls between the media query's range, the styling will be applied. So if a device's width is 500px, it will first have the 6plus styling, which will then be overridden by the 6's styling, then the 5s'. Normally, it's not recommended to try to tailor your CSS for a specific device, but if you do want to, you'll need to make sure none of the ranges overlap, or they will just be overridden by whichever styling comes last.