My @media queries aren’t working on mobile devices

I’m trying to allow a container that holds five images per row to change the size of it’s width if the browser width is smaller than the five images, including the margins etc.

I’ve added the following media query, and all works well when browsing on a desktop computer (resizing browser to less than 1080px in width)…The container changes width and the content is centered.

However, when browsing on mobile device (iPhone 4 and S4) it doesn’t work. Thoughts?

CSS

.main-width {
  margin: 20px auto;
  max-width: 1080px;
  min-width: 960px;
}

@media screen and (max-width: 1080px) {
  .main-width {
    max-width: 870px !important;
    min-width: 870px !important;
  }
}

solution

This is likely because you don’t have a viewport set.

Place the following meta tag in the <head> element of your document.

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

For more information, read “Using the viewport meta tag to control layout on mobile browsers “ - (mdn)