Search code examples
htmlcssmedia-queries

Media query not wokring properly

I am trying to use media query on one of my website, At the beginning it was working well, But later when I finished all media query section site design is not working properly, This are the media queries I used in style.css:

@media screen and (max-width: 768px) {}

@media screen and (max-width: 375px) {}

@media screen and (max-width:1920px) {}

@media screen and (max-width:1440px) {}

In intex.html file:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

After adding all this only the last media query with 1440px is working. What may the possible reasons for this?

Solution

  • Try using media queries as under, i.e. specify exactly which media queries to apply.

    @media screen and (max-width: 375px) {}

@media screen and (min-width: 376px) and (max-width: 768px) {}

@media screen and (min-width: 769px) and (max-width:1440px) {}

@media screen and (min-width: 1441px) and (max-width:1920px) {}