Multiple Media Queries in CSS Not Working?

How to make multiple Queries to work in CSS?

While developing and designing Website Solutions, the problems most of the web designers face is how to make multiple media queries to work. Let’s elaborate on this problem with one simple solution.

I have the following code and is not working.

@media only screen and (max-width:600px) and (min-width:200px) {

body {background:red;}

}

After I have the following code

@media screen and (max-device-width:400px) and (min-device-width:200px) {

body {background:red;}

}

The following code is not working also not apply to the screen resolution.

Answers:

The Answer to the above solution is very simple.

1.Min-Device-Width refers to the resolution of the device Vs Browser Width. Changing the Browser width will allow you to identify the media query in action.

2.Secondly, the order of the media queries also meant a lot. By default, CSS selects the last style if it found multiple styles for an attribute. Also, 2 CSS Files are to be made.

3. Making the two CSS Files meant that in the first CSS Code, the first media query has to be written, and in the second media query, the second code has to be written. It is the best way to do the work.

4.In the code instead of and, if && is used it is the best way to do work.

 

Magento

shopify

WordPress

Laravel

CMS

Our Services

WordPress

magento

shopify

laravel

cms

software development

Custom software & applications for businesses

mobile app development

Android apps, iOS apps & Hyprid app development

ecompress development

An online store with all the tools you need to build, manage, and grow your business

seo services

1st page rankings & consistent organic traffic

sem services

Paid ads for social media, google and online advertising

social media services

Creative designs, viral campaigns, community & social listening