CODEWITHSUNDEEP
csswebmedia-queries
rickzipser
rickzipser

Reputation: 149

media queries not working in my code

I've gone through all the help links for my problem with no results. I am trying to get my media queries working for IPHONE 6.

Nothing happens.

I have a meta tag:

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

Here are my link rel statements

   <link rel="stylesheet" media="all and (orientation:portrait)"      href="portrait.css" />
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />  

<link href="cliff.css" rel="stylesheet" type="text/css" />

here are my media queries:

@media only screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)
{
.calendar
{width:70%;}    
}
    @media only screen and (min-device-width: 414x) and (max-device-width: 425px) { iPhone6+ Styles }
{
.calendar
{width:85%;}
.content
{float:none; width:100%;}
.sidebar1 {
display:none;}
.header {display:none;}
.maincontent {text-align:left;}

}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) 
{
.calendar
{width:85%;}
.content
{float:none; width:100%;}
.sidebar1 {
display:none;}
.header {display:none;}
.maincontent {text-align:left;}

}

@media only screen and (min-device-width: 359px) and (max-device-width: 361px) { iPhone6+ Alt Styles }
{
.calendar
{width:85%;}
.content
{float:none; width:100%;}
.sidebar1 {
display:none;}
.header {display:none;}
.maincontent {text-align:left;}

}
@media only screen and (min-device-width: 319px) and (max-device-width: 480px) { iPhone5 or less Styles }
{
.calendar
{width:85%;}
.content
{float:none; width:100%;}
.sidebar1 {
display:none;}
.header {display:none;}
    .maincontent {text-align:left;}

}

I've put the media queries in each css file.
I've tried various max-width and max-height values recommended in my searches.

Nothing works. What am I missing?

Upvotes: 1

Views: 2004

Answers (1)

user3261158
user3261158

Reputation:

It's doesn't work because you are doing this completly wrong. Use @media queries in this way. 

<style>

.test{
    background-color:#F00;
    height:200px;
    width:1200px;
}

@media (max-width: 1260px) {
    .test{
    background-color:#0C0;
    width:900px;
    }
}

@media (max-width: 960px) {
    .test{
    background-color:#FF0;
    width:500px;
    }
}

@media (max-width: 560px) {
    .test{
    background-color:#0CF;
    width:320px;
    }
}

</style>

<div class="test"></div>

Upvotes: 1

Related Questions