Home/ Questions/Q 8442305
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T08:49:00+00:00

I have a really basic question with regards to media queries I have set

  • 0

I have a really basic question with regards to media queries

I have set up some sites which work fine in displaying content with different layouts called via media queries, however on viewing them on desktop and resizing the screen the media query doesnt get called. Any pointers on where I am going wrong?

     <!DOCTYPE html>

    <html>
    <head>
        <title>Page Title</title>

        <style>
            div{
                background:red;
                width:600px;
                height:200px;
            }
            @media (min-width: 61px AND max-width: 600px) {
div {
               background:green;
}
        }
        </style>
    </head>

    <body>
    <div>Something</div>


    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    div {
  background:red;
  width:600px;
  height:200px;

  @media screen and (min-width: 61px) and (max-width: 600px) {
     background:green;
  }
}

    http://jsfiddle.net/spacebeers/5NzrW/

    Your media query was outside the selector for the div. As far as things were concerned you were outputting the following:

    div {
    background:red;
    width:600px;
    height:200px;
}

background:green;

    So background: green was just on it’s own. Replace your code with the example at the top and it should be fine.

    • 0