Media Queries

[gibson135]

For some reason this media query is not responding on my iphone. It is an iPhone6. It does respond using Chrome but not on the actually iPhone.

I'm posting what is as far as I know relevant.

What is happening is that even though the mobile size has one background color (using this as a test property) it is just using the tablet size anyway.

$width:1000;
@import "bourbon/bourbon";
$max-width: em($width);
@import "neat/neat";
@import "bitters/base";

$s:280;
$m:768;
$l:1000;

$small: new-breakpoint($s+px);
$medium: new-breakpoint($m+px);
$large: new-breakpoint($l+px);  

@include media($small) {
  @for $i from 1 through 12 {
    .small-#{$i} {
      @include span-columns($i);    
    }
  }

  body {
    background:blue;
  }
}

@include media($medium) {
  @for $i from 1 through 12 {
    .medium-#{$i} {
      @include span-columns($i);    
    }
  } 

  body{
    background-color:yellow;
  }
}

[gibson135]

I saw that is said background: instead of background-color: didn't do anything

[paulthegeek]

@gibson135 I would love to help. I have a few questions to make sure I am understanding what result you are expecting.

1. Are you expecting the background color to change when you are going from the small(iPhone) breakpoint to the medium(iPad) breakpoint?
2. When you mention that you are seeing the correct results in Chrome are you referring to the dev tools like in this screenshot?
   
3. Could you post a screenshot of the behavior you are currently seeing on the phone?

[tysongach]

Closing due to lack of response.