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

_x000D_ _x000D_ 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; } }