CODEWITHSUNDEEP
csshtmlresponsive-designmedia-queries
fenerlitk
fenerlitk

Reputation: 5834

Width doesn't respond according to the media query

I was experimenting with media queries to see the effects. So I tried using min-width(480px) query to change the width of a div from 100% to 520px when the window was maximised but the width of the div stays 100%.

The code:

#box {
    margin: auto;
    background: white;
    width: 100%;
}
// Media Queries
@media only screen and (min-width: 480px) {
    #box {
        width: 200px;
        max-width: 200px;
        background: black;
    }
}

So my question is, why does the width of the #box stay as 100% when the window is maximised?
What am I doing wrong?

Upvotes: 0

Views: 205

Answers (3)

Milche Patern
Milche Patern

Reputation: 20492

jsFiddled here is your code with min-width:480px. It applies when the size of available space is bigger than 480px (the black box)

try max-width. This context will apply when available screen space is less then 480 pixels. jsFiddled here, black box will be applied when available space width is lesser than 480px

@media only screen and (max-width: 480px) {
    #box {
        width: 200px;
        max-width: 200px;
        background: black;
    }
}

So, your #box is by default 100% width except when the available space is greater than 480px. your code is working OK.

Maybe it's the comment : // Media Queries witch caused an error ?

Upvotes: 2

fenerlitk
fenerlitk

Reputation: 5834

I had commented the code using // syntax by accident which isn't supported in CSS, hence the code below that line of comment not working. It now works after I changed it /**/ syntax.

Upvotes: 0

Xareyo
Xareyo

Reputation: 1377

I think you have the media query wrong. As you have it now, it's changes the content over 480px. Where I think you want it under 480px.

So it should be:

@media only screen and (max-width: 480px) {
  //code
}

Hence, (max-width: xxx) not, (min-width: xxx).

Example fiddle

Upvotes: 0

Related Questions