13 Replies Latest reply on Jul 4, 2014 10:25 AM by Nancy OShea

    Media queries are not working on mobile device.

    Jennifer Blatz

      Hello. I am not sure why my media queries are not working on my mobile phone. When I slide the desktop version to be narrow like a mobile phone, the smaller tablet and mobile views seem to work. But they do not work on an actual device. Is something wrong my my code? jenniferblatzdesign.com. Thanks for your help.

       

      Here's the CSS:

      @import url('http://fonts.googleapis.com/css?family=Gabriela');

       

       

      html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

        margin: 0;

        padding: 0;

        border: 0;

        font-size: 100%;

        font: inherit;

        vertical-align: baseline;

        outline: none;

        -webkit-font-smoothing: antialiased;

        -webkit-text-size-adjust: 100%;

        -ms-text-size-adjust: 100%;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

        bottom: 30px;

      }

      html { overflow-y: scroll; }

      body {

        background: #fcfcfc url('bg.png'); /* http://subtlepatterns.com/crossword/ */

        font-size: 62.5%;

        line-height: 1;

        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

        padding: 45px 25px;

        padding-bottom: 100px;

      }

      /* Clearfix */

      .clearfix:before,

      .clearfix:after {

          content: " ";

          display: table;

      }

      .clearfix:after {

          clear: both;

      }

      .clearfix {

          *zoom: 1;

      }

       

       

      /* Basic Styles */

      body {

        background-color: #ece8e5;

      }

      nav {

        height: 40px;

        width: 94%;

        background: #0068ac;

        font-size: 1.5 em;

        font-family: 'PT Sans', Arial, sans-serif;

        font-weight: bold;

        position: relative;

        border-bottom: 2px solid #283744;

      }

      nav ul {

        padding: 0;

        margin: 0 auto;

        width: 800px;

        height: 40px;

      }

      nav li {

        display: block;

        float: left;

        width: 20%;

        text-align: center;

      }

      nav a {

        color: #fff;

        display: inline-block;

        width: 100px;

        text-align: center;

        text-decoration: none;

        line-height: 40px;

        text-shadow: 1px 1px 0px #283744;

      }

      nav li a {

        border-right: none;

        box-sizing:border-box;

        -moz-box-sizing:border-box;

        -webkit-box-sizing:border-box;

      }

      nav li:last-child a {

        border-right: 0;

      }

      nav a:hover, nav a:active {

        background-color: #89a8bc;

      }

      nav a#pull {

        display: none;

      }

      #header {

        text-align: center;

      }

      #header h1 {

        display: none;

      }

      #header h2 {

        width: 70%;

        margin-top: 30px;

        margin-bottom: 40px;

        margin-left: auto;

        margin-right: auto;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        font-size: 2.3em;

        line-height: 1.9em;

        text-align: center;

        font-weight: 200;

      }

        #header img {

        width: 50%;

        margin-bottom: 40px;

        margin-top: 30px;

      }

      #footer p {

        margin-top: 10px;

        font-size: 1.1em;

        font-weight: 200;

        line-height: 1.5em;

        text-align: center;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

      }

      #content #footer p a {

        color: #005496;

      }

      #footer ul li a {

        color: #005496;

      }

      #footer ul li {

        display: inline;

        padding-top: 20px;

        margin-top: 50px;

        margin-left: 20px;

        margin-right: 20px;

      }

      #about h3 {

        color: #005496;

        font-weight: 300;

        font-size: 2.5em;

        margin-bottom: 1px;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        line-height: 2.2em;

      }

      #praise h3 {

        color: #005496;

        font-weight: 300;

        font-size: 2.5em;

        margin-bottom: 10px;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        line-height: 2.7em;

      }

      #about p {

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        font-weight: 200;

        font-size: 1.6em;

        line-height: 1.7em;

      }

      #about p a {

        color: #005496;

      }

      #praise p {

        width: 70%;

        padding-left: 25px;

        color: #474646;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        font-style: italic;

        font-weight: 300;

        font-size: 1.7em;

        line-height: 1.4em;

        margin-top: 10px;

        margin-bottom: 20px;

      }

      #praise h5 {

        padding-left: 40px;

        color: #4C3B5F;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        font-weight: bold;

        font-size: 1.8em;

      }

      #praise h6 {

        padding-left: 56px;

        color: #474646;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        font-style: italic;

        font-weight: 300;

        font-size: 1.2em;

        line-height: 2em;

      }

      #praise hr   {

        height: 1px;

        margin-top: 30px;

        margin-bottom: 30x;

        color: #7B7979;

      }

      #about {

        width: 70%;

      }

      #contact h3 {

        color: #005496;

        font-weight: 300;

        font-size: 2.5em;

        margin-bottom: 1px;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        line-height: 2.2em;

        margin-top: 40px;

      }

      #header p {

        color: #4C3B5F;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        font-size: 2.3em;

        line-height: 1.5em;

        margin-top: -30px;

        font-weight: 500;

      }

      #contact p {

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        font-weight: 200;

        font-size: 1.6em;

        line-height: 1.7em;

      }

      #contact p a {

        color: #005496;

      }

      #social h3 {

        color: #005496;

        font-weight: 300;

        font-size: 2.5em;

        margin-bottom: 1px;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        line-height: 2.2em;

        margin-top: 40px;

      }

      #social h2 img {

        margin-top: 10px;

        margin-right: 10px;

      }

      #social {

        width: 90%;

      }

      #linkedin h2 a {

        color: #005496;

        font-weight: 400;

        font-size: 1.9em;

        margin-bottom: 0px;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        line-height: 2em;

        margin-top: 0px;

        display: block;

        padding-bottom: 0px;

        text-decoration: none;

      }

      #twitter h2 a {

        color: #005496;

        font-weight: 400;

        font-size: 1.9em;

        margin-bottom: 0px;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        line-height: 2em;

        margin-top: 0px;

        display: block;

        padding-bottom: 0px;

        text-decoration: none;

      }

      #behance h2 a {

        color: #005496;

        font-weight: 400;

        font-size: 1.9em;

        margin-bottom: 0px;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        line-height: 2em;

        margin-top: 0px;

        display: block;

        padding-bottom: 0px;

        text-decoration: none;

      }

      #facebook h2 a {

        color: #005496;

        font-weight: 400;

        font-size: 1.9em;

        margin-bottom: 0px;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        line-height: 2em;

        margin-top: 0px;

        display: block;

        padding-bottom: 0px;

        text-decoration: none;

      }

      #pinterest h2 a {

        color: #005496;

        font-weight: 400;

        font-size: 1.9em;

        margin-bottom: 0px;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        line-height: 2em;

        margin-top: 0px;

        display: block;

        padding-bottom: 0px;

        text-decoration: none;

      }

       

       

      /*Styles for screen 600px and lower*/

      @media screen and (max-width: 600px) {

        nav {

        height: auto;

        width: 94%;

        }

        nav ul {

        width: 100%;

        display: block;

        height: auto;

        }

        nav li {

      width: 20%;

        float: left;

        position: relative;

        }

        nav li a {

        border-bottom: 1px solid #576979;

        border-right: 1px solid #576979;

        }

        nav a {

          text-align: center;

          width: 100%;

          text-indent: 5px;

        }

        #header img {

        width: 90%;

        margin-bottom: 40px;

        margin-top: 30px;

      }

      #header h2 {

        width: 80%;

        margin-top: 30px;

        margin-bottom: 40px;

        margin-left: auto;

          margin-right: auto;

        font-size: 1.7em;

        line-height: 1.7em;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        text-align: center;

      }

      }

       

       

      /*Styles for screen 515px and lower*/

      @media only screen and (max-width : 480px) {

        nav {

        border-bottom: 0;

        text-align: center;

        width: 94%;

        }

        nav li {

        width: 100%;

        float: left;

        position: relative;

        text-align: center;

        }

        nav a#pull {

        display: block;

        background-color: #ece8e5;

        width: 100%;

        position: relative;

        }

        nav a#pull:after {

        content:"";

        background: url('nav-icon.png') no-repeat;

        width: 30px;

        height: 30px;

        display: inline-block;

        position: absolute;

        right: 15px;

        top: 10px;

        }

        #header img {

        width: 100%;

        margin-bottom: 30px;

        margin-top: 30px;

      }

      #praise p {

        width:95%;

      }

      #about {

        width: 100%;

      }

      }

       

       

      /*Smartphone*/

      @media only screen and (max-width : 320px) {

        nav li {

        display: block;

        float: none;

        width: 100%;

        text-align: center;

        }

        nav li a {

        border-bottom: 1px solid #576979;

       

        }

      }

       

       

      br { display: block; line-height: 1.6em; }

       

       

      article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

        display: block;

        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

        font-size: 1.2em;

        line-height: 1.6em;

        text-align: center;

        text-decoration: none;

      }

      ol, ul { list-style: none; }

       

       

      input, textarea {

        -webkit-font-smoothing: antialiased;

        -webkit-text-size-adjust: 100%;

        -ms-text-size-adjust: 100%;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

        outline: none;

      }

       

       

      blockquote, q { quotes: none; }

      blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

      strong, b { font-weight: bold; }

       

       

      strong, b { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif}

      em, i { font-style: italic; }

       

       

      table { border-collapse: collapse; border-spacing: 0; }

      img { border: 0; max-width: 100%; }

       

       

      h1 {

        font-family: 'Gabriela', Tahoma, sans-serif;

        font-size: 3.7em;

        font-weight: 700;

        line-height: 1.55em;

        margin-bottom: 18px;

        text-align: center;

        color: #514b53;

        letter-spacing: -0.06em;

        text-shadow: 1px 1px 0 rgba(255,255,255,0.8);

      }

       

       

      /** page structure **/

      #wrapper {

        display: block;

        max-width: 1100px;

        margin: 0 auto;

      }

       

       

      #portfolio {

        display: block;

      }

       

       

      #portfolio li {

        display: block;

        float: left;

        width: 30%;

        max-width: 400px;

        margin-right: 20px;

        margin-bottom: 20px;

      }

       

       

      #portfolio li a {

        display: block;

        padding: 8px;

        background: #fff;

        -webkit-border-radius: 2px;

        -moz-border-radius: 2px;

        border-radius: 2px;

        -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);

        -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);

        box-shadow: 1px 2px 2px rgba(0,0,0,0.25);

      }

       

       

      .mfp-title {

        font-size: 1.2em;

        color: #ddd !important;

        font-weight: 700;

      }

       

       

      /** clearfix **/

      .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

      .clearfix { display: inline-block; }

       

      html[xmlns] .clearfix { display: block; }

      * html .clearfix { height: 1%; }

       

       

       

       

      /** media queries **/

      @media screen and (max-width: 780px) {

        #portfolio li {

          width: 45%;

        }

      }

       

       

      @media screen and (max-width: 550px) {

        #portfolio {

          text-align: center;

        }

       

        #portfolio li {

          float: none;

          display: inline-block;

          width: 80%;

          margin-bottom: 30px;

        }

      }