Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Grim Fandango
Grim Fandango
5,804 Points

Media query not working on iPhone 6 Plus?

Hi,

I am new to development and am totally stumped with this CSS issue. I have images that display in an unordered list. On small mobile devices they display at 100% width vertically, but my media query changes the width to 48% at 365px or higher, which displays two images side by side when viewed in desktop Chrome's iPhone 6 Plus landscape emulation mode, yet when I actually check on my physical iPhone 6 Plus this media query isn't being triggered and the images are still vertically stacked. I've checked in Safari and Chrome.

My CSS:

@media screen and (min-width: 365px) {

  /********************************************
PAGE: PORTFOLIO
*********************************************/

#gallery li {
  width: 48%;
  margin: 2.5% 1%;
  white-space: nowrap;
  overflow: hidden;
}

My HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>James Aslett | Photography</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=ABeeZee|Poiret+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body>
    <div class="wrapper-main clearfix">
      <header>
        <a href="index.html" id="logo">
        <h1>James Aslett</h1>
        </a>
        <nav class="main-nav clearfix">
          <ul>
            <li><a href="index.html" class="selected">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </header>
      <div id="wrapper">
       <section>
         <ul id="gallery">
            <li>
              <a href="img/01.jpg" target="_blank">
                <img src="img/01-small.jpg" alt="">
                <p>Stonehenge</p>
              </a>
            </li>
            <li>
              <a href="img/02.jpg" target="_blank">
                <img src="img/02-small.jpg" alt="">
                <p>Clouds</p>
              </a>
            </li>

The viewport width of the 6 Plus is 667px so I would definitely expect this to trigger.

Help!

Thanks

4 Answers

Justin Coen
seal-mask
.a{fill-rule:evenodd;}techdegree
Justin Coen
Full Stack JavaScript Techdegree Student 12,829 Points
Justin Coen
.a{fill-rule:evenodd;}techdegree
Justin Coen
Full Stack JavaScript Techdegree Student 12,829 Points

Try moving 

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

towards the top of your head. Looks like your CSS files are running before it hits the meta tag.

Grim Fandango
Grim Fandango
5,804 Points
Grim Fandango
Grim Fandango
5,804 Points

Thanks jusitn, I'll try it out!

Grim Fandango
Grim Fandango
5,804 Points
Grim Fandango
Grim Fandango
5,804 Points

It's still not working on the physical device! :(

I've not modified the CSS but I've moved the viewport meta tag. This is bizarre!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>James Aslett | Photography</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=ABeeZee|Poiret+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body>
    <div class="wrapper-main clearfix">
      <header>
        <a href="index.html" id="logo">
        <h1>James Aslett</h1>
        </a>
        <nav class="main-nav clearfix">
          <ul>
            <li><a href="index.html" class="selected">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
Grim Fandango
Grim Fandango
5,804 Points
Grim Fandango
Grim Fandango
5,804 Points

Fixed it - was missing a closing } from my media query - whoops!