media queries not working on phone (but it works on browser)

Question

I created my wedding website using foundation/yeoman etc, and am hosting it on github. All the media queries were working perfectly up until a few weeks ago (I didn't change anything or edit my website at all), and now it does not work on iphone/phone browsers. It worked on my iPad, and it works on desktop browsers when I minimize the screen. I Honestly have tried so many things and cannot figure it out.

The magellan nav links aren't working on mobile either...

please help! Thank you in advance!

www.daniandjaymo.com is the site.

Here is the CSS (I have the meta tag with view port at the top as it is set up with foundation when you first install it)


    @media only screen and (min-width: 44.5625rem) {
     .intro  {
      background-image: url("/images/meandjaymo5.jpg");
      background-position: center center;
      background-size: $background-size;
      padding: 100px 0 0 0;
      }
    }
    @media only  handheld, screen and (max-width: 44.5rem) {
     .intro  {
      background-image: url("/images/meandjaymo5-2.jpg");
      background-size: cover;
      background-position: center center;
      padding: 100px 0 0 0;
      }
    }


    @media only screen and (min-width: 700px){
        .bridal {
        padding: 10px 50px 50px 50px;
      }
    }
      @media only screen and (max-width: 699px){
          .bridal {
        padding: 20px;
      }
    }
    .to-do-boxes {
      padding: 30px 25px 20px 25px;
    }
      @media only screen and (min-width: 1000px) {
        .to-do-boxes {
      width: 30%;
      margin: 10px;
      }
    }
      @media only screen and (min-width: 930px) and (max-width: 999px) {
        .to-do-boxes {
      width: 50%;
      margin: 25px;
      }
    }
      @media only screen and (max-width: 929px) {
        .to-do-boxes {
      width: 100%;
      margin: 10px;
      }
    }

In my opinion you have too much of these in the first place... min-width: 44.5625rem - 1 rem is 16px so 16 * 44 is around 700px. You can combine these together. Also check this one, "handheld" seems to be outdated feuture...: stackoverflow.com/questions/3893342/… — TheFullResolution

Jerceka Jerceka · Accepted Answer · 2018-11-26T10:49:16

Your html should include that line:

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

media queries not working on phone (but it works on browser)

1 Answers