CODEWITHSUNDEEP
cssmedia-queries
Marwan Ossama
Marwan Ossama

Reputation: 345

@media doesn't work

I was rewriting the style of my page for smaller screens using media queries : 

@media only screen 
and (min-width : 400px) 
and (max-width : 1024px) {
#container {
right:10px;
top:50px;
font-size:24px;
position:absolute;
min-height: 85%;
margin-left:auto;
width:100px;
}   
#portfolio {
width:100px;
min-height:550px;
-webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;}
#whoami {
width:100px;
min-height:550px;
-webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;    }
#blog {
width:100px;
min-height:550px;
-webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;    
}
#contact {
width:100px;
min-height:550px;
-webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;
}

}

And NOTHING DID WORK AT ALL.. I viewed the webpage through my Dreamweaver CS6 compatibility view and it didn't work so I checked it by resizing my browser window and didn't work too. Any ideas why didn't it work ? Doesn't it work with IDs ?!

Upvotes: 2

Views: 5063

Answers (4)

Sunakshi Singh
Sunakshi Singh

Reputation: 1

As you have changed so many features using media query, and I believe that for all the general features (means the styles you added before using media query) you must have used external stylesheet rather than using inline style tag. Because if you use inline style tag for any property, that property is not going to change by using media query for the given screen dimension. If really none of the line of your code is working, then I might be wrong. But if a few are working and a few are not, then I think you should check and remove the inline style tags and use stylesheet in place of it.

Upvotes: -1

Anarcociclista
Anarcociclista

Reputation: 312

This has happened to me, too, on Chrome and Firefox.

I found that the problem arises when the default visibility is set to hidden or display to none (the visibility of the elements affected by css was controlled by js).

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

The code posted works as such, so the problem is elsewhere, e.g. in the rules inside the construct or in using a browser that does not support media queries (that would in practice mean IE 8 or older – otherwise browser support is very good).

To check out the situation, test first with a minimal document like

<!doctype html>
<title>Testing media queries</title>
<style>
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {
  body { background: green; }
}
</style>
Hello world

You should also test the style sheet inside the construct by taking it out of, making it unconditional, to see whether it works at all.

Upvotes: 0

migkapa
migkapa

Reputation: 31

Try to add this meta on your header :

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

Upvotes: 1

Related Questions