CODEWITHSUNDEEP
htmlcssmedia-queries
Sam Alexander
Sam Alexander

Reputation: 139

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?

Upvotes: 1

Views: 115

Answers (3)

4dgaurav
4dgaurav

Reputation: 11496

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) {}

Upvotes: 3

Harshal Sawant
Harshal Sawant

Reputation: 607

I would suggest to use media queries in sequence like below. It will work.

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

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

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

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

Upvotes: 1

Dheeraj Narayan
Dheeraj Narayan

Reputation: 21

you might have missed closing some brackets {} for the media queries. Check whether u have closed all your media queries..

Upvotes: 0

Related Questions