CODEWITHSUNDEEP
htmlcss
user2855168
user2855168

Reputation:

Media Query Issue

I am having the weirdest issue with media queries. In my desktop browser, they work fine when it is resized. When I test on my iPhone (5C), the media queries are completely ignored.

EDIT If I change max-width to something absurd like 3000px, the styles get applied just fine..

The media queries are the last items in my stylesheet, fyi. Here is the media query specific block:

@media only screen and (max-width:930px){
html{ font-size:46.875%; }
.arrowdown, .arrowup{ border-width:20px;}
#about .abouttext{
    width:90%;
    font-size: 1.8rem;
    line-height:2.7rem;
    padding-bottom:40px;
}
#quotebox{background-color:green;}
#quotebox h3{ width:65%; }
#quotebox div{ width:40%;}
#contact ul li{
    font-size:1.6rem;
    width:90%;
}
.socialbox img{ opacity:1; }
.socialbox a{ margin: 0 20px;}

.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
    visibility: hidden;
    opacity:0;
}
.hint:after, [data-hint]:after {
    content: "-";
    width:0;
    height:0;
}   

}

Anyone got any ideas?

Upvotes: 0

Views: 98

Answers (1)

Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

Try adding: max-device-width to your media query along with this following snippet to the head of your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">

So your media queries should look like:

@media only screen and (max-width: 930px), only screen and (max-device-width: 930px){
    html{ font-size:46.875%; }
    .arrowdown, .arrowup{ border-width:20px;}
    #about .abouttext {
            width:90%;
            font-size: 1.8rem;
            line-height:2.7rem;
            padding-bottom:40px;
            }
}

Upvotes: 1

Related Questions