CODEWITHSUNDEEP
cssmobileresizemedia
mindspins
mindspins

Reputation: 78

@media works on browser window resize, but not on mobile phone

SOLVED: Tom: You were so right. Unfortunately WordPress function wp_head() was adding the width=1100 because of a plugin. Thanks!

I'm working on a new responsive website, but can't seem to get the @media query to work. It does work when resizing the browser window on my desktop, but it won't work on my ipad, iphone or android phone.

What am I doing wrong?!

Here the link: http://demo.mindspins.com/atmnieuw/ Here's the link to the CSS: http://demo.mindspins.com/atmnieuw/wp-content/themes/atm/css/dynamic.php

Thanks in advance!

On request the CSS code:

@media all and (max-width: 1460px) {
    .site-width{ width: 1199px; }
    .main-width{ width: 719px; }
}
@media all and (max-width: 1220px) {
    .site-width{ width: 959px; }
    .main-width{ width: 479px; }
    #page-title h1.thetitle{
        font-size: 20px;
        line-height: 24px;
    }
    .sidebar .widget a.form-button-link, .sidebar .widget span.form-button-link{
        font-size: 20px;
        line-height: 24px;
    }
}
@media all and (max-width: 980px) {
    .site-width{ width: 719px; }
    .main-width{ width: 479px; }
    .right-width{ display: none; }
    #header-right{ display: none; }
    .widgets-wrapper-1{ display: block; }
    .widgets-wrapper-3{ display: block; position: relative; padding: 20px 0 0 20px; }
}
@media all and (max-width: 740px) {
    .site-width{ width: 95%; margin: 0 auto;}
    #header-wrapper{ width: 100%; }
    #header-left{ display: none; }
    #header-mid{ height: 80px; }
    #atmlogo a.atm {
        z-index: 100;
        top: 24px;
        left: 0;
    }
    .main-width{ width: 100%; }
    .left-width{ width: 100%; }
    .sidebar-left{ display: none; }
    .site-bg{ display: none; }
    #header-left span.header-contact{ height: 80px; width: 100%;}
    #main-nav{ height:auto !important; }
    #mobile-nav{
        margin: -4px 0 1px 0;
        display: block;
        position: relative;
        width: 100%;
    }
    #mobile-nav .nav-wrapper{
        display: block;
        color:  #fff;
        background: #cc0033;
        margin: 1px 0;
        height: 40px;
        padding: 0 10px;
    }
    #mobile-nav .nav-wrapper select.atm-dropdown{
        font-size: 12px;
        display: block;
        height: 40px;
        width: 100%;
        color:  #fff;
        background: #cc0033;
        border: 0;
        clear: both;
        -webkit-border-radius: 0;
        -webkit-appearance: none;
    }
    #mobile-nav .theme-s{
        width: 100%;
        background: #cc0033;
        color:  #fff;
    }

    #mobile-nav input.s{
        background: #cc0033;
        color:  #fff;
    }

    #mobile-nav input.searchsubmit{
        border-left: solid 1px #dcdcdc;
        color:  #fff;
        background: #cc0033;
        background-image: url(../images/icon_search.png);
        background-repeat: no-repeat;
        background-position: right top;
        -webkit-border-radius: 0;
        -webkit-appearance: none;
    }

    #primary{ display: none; }
    #main-content-header{
        height:auto !important;
        margin: 0 0 1px 0;
    }
    #main-content-header span.header-image{
        display: block;
        float: left;
        width: 25%;
        height:auto !important;
        margin: 0;
    }
    #main-content-header span.header-image img{
        line-height: 0px;
        margin: 0;
        padding: 0;
    }

    #page-title{
        height: 79px;
    }
}
@media all and (max-width: 500px) {
    body {
        font-size: 12px;
        line-height: 20px;
    }
        #footer-nav{ display: none; }
        #copyrights{ display: none; }
        .entry-content-bg{ padding: 20px; }
        #page-title .title-wrapper{ padding: 0 20px }
        #page-title h1.thetitle{
        font-size: 16px;
        line-height: 20px;
    }
}

Upvotes: 4

Views: 7229

Answers (3)

Tom Oakley
Tom Oakley

Reputation: 6403

On looking again, when using my iPhone 4S and the Remote Web Inspector introduced in iOS 6, I couldn't find any styles for anything below max-width: 1200px, even though they are in the CSS file. I don't know why this is.

Also, I wrote a blog post about Responsive design and Media Queries a few months, you can read it here if you wish. Not saying you're not good at media queries (it's a very nice site!) just hope it will be an interesting read for you :)

EDIT: just looking at your site again, I noticed in the head (right at the bottom) you have this code:

meta name="viewport" content="width=1100"

This could be why the styles weren't applying at anything below a screen width of 1100px or 1200px. Take this out and try it again.

Upvotes: 2

Tom Oakley
Tom Oakley

Reputation: 6403

It might have something to do with having your CSS in seperate files. As a general rule you should always write all your CSS in one file (style.css). It shouldn't do but just for clarity put them both in the same file and see what happens. If it doesn't work comment on this and I'll take another look.

Upvotes: -1

Saeed
Saeed

Reputation: 3775

You can use this code in the head tag:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Upvotes: 10

Related Questions