CSS media queries not working anywhere

Question

I am trying to use different CSS Stylesheets for different layouts (as you have already guessed from the title) but unfortunately nothing is working.

I tried loading the CSS file

 <link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />

in the meta tag and I also tried using

@media (min-width: 401px) and (max-width: 800px) {
.page{max-width:730px; margin:0 auto; display: block; height:850px;  float:left; }
  }

in the main css file but no changes occur.

This is how my header looks like:

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/image-slides.css" type="text/css">
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css" />
    <link rel="stylesheet" href="css/main.css" type="text/css" />
    <link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />

The CSS property that I am trying to change is a simple's div's width and so when I resize the browser nothing happens.

What is wrong with my code?

what browser are you trying this on? also when you inspect the page div, is your styles getting overridden or does it not appear at all — Huangism
– Huangism, Commented Aug 27, 2013 at 16:01
Is literally nothing working? cause you may have mistyped the path of the css file somewhere. Also is the bootstrap's css media queries interfering with your media query? — JamesB123
– JamesB123, Commented Aug 27, 2013 at 16:01

JerryHuang.me · Accepted Answer · 2013-08-27 16:32:48Z

10

Is your HTML properly set as such:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
</head>
<body>
    //stuff
</body>
</html>

Use:

@media screen and (min-width: 401px) and (max-width: 800px) { … }

Instead of:

@media (min-width: 401px) and (max-width: 800px) { … }

answered Aug 27, 2013 at 16:32

JerryHuang.me

1,7801 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

armadadrive Over a year ago

It's embarrassing how many times I've had to Google this only to remember I'm missing my <meta name="viewport" ...> tag...

Eshant Sahu · Accepted Answer · 2013-08-27 17:48:58Z

5

you can simply try the code like following to make your site responsive to make changes on phone view as well on resizing , I don't think where are exactly making bug in your code , but the given code works for me well :

<link rel='stylesheet' media='screen and (max-width: 700px)' href='stylesheets/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='stylesheets/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='stylesheets/wide.css' />

edited Aug 27, 2013 at 17:48

answered Aug 27, 2013 at 16:33

Eshant Sahu

3601 gold badge5 silver badges18 bronze badges

Comments

nbro · Accepted Answer · 2015-07-27 13:01:26Z

5

I think that is the way of ordering code.

Original CSS code should be placed first, then other screen with @media ordered by size:

...original CSS code...

@media(max-width:300px) {...}  

@media(max-width:533px) {...}  

@media(max-width:640px) {...}

edited Jul 27, 2015 at 13:01

nbro

16k34 gold badges122 silver badges219 bronze badges

answered Jul 11, 2015 at 13:54

bao vu dao

511 silver badge2 bronze badges

Comments

SAFEER N · Accepted Answer · 2013-08-27 17:10:17Z

0

try this

@media all  and (min-width: 401px) and (max-width: 800px) {
    /*your code here*/
}

answered Aug 27, 2013 at 17:10

SAFEER N

1,1972 gold badges17 silver badges30 bronze badges

Comments

Vikas Singhal · Accepted Answer · 2013-08-28 08:46:45Z

-1

<meta name="viewport" content="width=device-width">

Here is an example. It is responsive design.

edited Aug 28, 2013 at 8:46

answered Aug 28, 2013 at 8:40

Vikas Singhal

204 bronze badges

Collectives™ on Stack Overflow

CSS media queries not working anywhere

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Related