CODEWITHSUNDEEP
htmlcssmedia-queries
Sebastian Olsen
Sebastian Olsen

Reputation: 10878

Media Queries not working even with <meta> tag

I have a simple website that I am making for my music over at (secure tunnel) http://79a6b00f.ngrok.io using media queries and everything, with the meta tag (<meta name="viewport" content="width=device-width, initial-scale=1">)in the header on index.html.

I have had someone test it on their phone, and the website zooms out, instead of maintaining scale and showing a hamburger menu. Here's my query code:

@media all and (max-width: 2600px) {
    .w-ctrl {
        width: 950px;
        margin: auto;
    }
}

@media all and (max-width: 966px) {
    .w-ctrl {
        width: 100%;
        margin: auto;
    }
    .sub-header {
        width: 100%;
        background: #37474F;
        height: 500px
    }
    .lnd-con .pic {
        height: 500px;
        background-attachment: scroll;
    }
    .lnd-con .label-con {
        top: -350px;
        text-align: center;
    }
    .label-con .title {
        font-size: 25px;
    }
    .label-con .subtitle {
        font-size: 25px;
    }
}

@media all and (max-width: 636px) {
    .w-ctrl {
        width: 100%;
        margin: auto;
    }
    .nav-con-big {
        display: none;
    }
    .nav-con-small {
        display: block;
    }
    .lnd-con .pic {
        height: 300px;
    }
    .title-con {
        display: none;
    }
    .lnd-con {
        margin-top: 0px;
    }
    .lnd-con .label-con {
        position: static;
        text-align: left;
        background: transparent;
        padding-top: 5px;
        padding-bottom: 8px;
        letter-spacing: 0px;
    }
    .label-con .title {
        font-size: 20px;
    }
    .label-con .subtitle {
        font-size: 18px;
    }
    .sub-header {
        width: 100%;
        height: 400px
    }
}

I could not fit my website into a js-fiddle, so I created a tunnel instead. I hope it's okay, as far as I am aware I'm not breaking any rules.

Upvotes: 2

Views: 617

Answers (2)

Lieutenant Dan
Lieutenant Dan

Reputation: 8274

You have to show us what meta viewport tag your using for #1. There are many.

But also; if you'd like to see the changes within your browser you can always write the media queries as between 2 widths as below:

/* SAMPLE No greater than 900px, no less than 400px */
@media (max-width:900px) and (min-width:400px) {
    .CurrentlyOnVacation {
        display:none;
    }
}​

Upvotes: 0

alliuca
alliuca

Reputation: 396

I see this declaration at the top of your global.css:

@viewport {
  zoom: 1.0;
  width: extend-to-zoom;
}

take it out or set width: device-width;:

@viewport {
  width: device-width;
}

also, support for css device adaptation is pretty poor (http://caniuse.com/#search=%40viewport), possibly it is somehow conflicting with the meta tag implementation

Upvotes: 2

Related Questions