CODEWITHSUNDEEP
htmlcssmobileherokumedia-queries
user3295436
user3295436

Reputation: 1046

Media Queries for Heroku App working on desktop but not mobile devices(despite trying multiple solutions)

Help! I created a Heroku app and my CSS3 @media queries aren't working on mobile devices(checked phone and tablets already). Weirdly, they only work on web browsers(I've checked by resizing pages in chrome and firefox).


I've already included the viewport meta tag in my html document:

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


And here's a portion of my @media query syntax:

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

.realstff-wrapper { height: 88vh; }

#gall-box { display: none; }

#img-caption {

  float:right;
  right: 0em;
  height: 20px;
  width: 200px;

}

#img-block { height: 100vh; overflow: hidden; }

}



I've tried changing @media syntax to these styles, but none of them seem to do the trick:

@media (max-width: 843px){ }

@media (max-device-width: 843px){ }

@media (max-width: 843px) and (max-device-width: 843px) { }

@media screen (max-device-width: 843px){ }

@media screen and (max-device-width: 843px){ }

@media only screen and (max-device-width: 843px){ }

@media only screen and (max-device-width: 843px), (max-width: 843px) { }

@media only screen and (max-device-width: 843px), only screen and (max-width: 843px) { }

I really can't figure out why it's acting out on me :( Kudos for whoever can help solve this problem.

Upvotes: 0

Views: 855

Answers (1)

user3295436
user3295436

Reputation: 1046

Solved my own problem. The @media syntax I originally used actually worked in conjunction with view metatag.

Turns out I just wasn't "git commiting" my changes correctly through command line.

Embarassing..heh...

Upvotes: 0

Related Questions