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 James Ingmire
James Ingmire
11,901 Points

Can you explain this.. Why does these media queries not get triggered on iphone? Also why apple devices not showing svg?

Is there a reason the following media query does not work on an iphone 5s I have tested with. I created the site being responsive and fluid (I think) so surely a device under the max widths set below would trigger them just like it does in the browser as works fine.

Any Ideas?

Also does an ipad have certain rules regarding border-radius and also svg images.

Many Thanks.

@media only screen and ( max-width: 1140px ) {
    #rightcolumn { position: inherit; margin-left: 0px; }
}
@media only screen and ( max-width: 1055px ) {
    #rightcolumn { width: 100%; text-align: center; }
    #leftcolumn { width: 100%; text-align: center; }
    .css-carousel { width: 420px; height: 420px; margin: 0 auto; }
    #intro-top { margin-top: -100px; }
}
@media only screen and ( max-width: 900px ) {
    .header-container { margin-top: -30px; padding: 0;  }
    nav ul li { width: 100%; float: none; margin: 0 auto; }
    .inner { float: none; background-color: grey; }
    footer .right { float: none; height:200px; }
    footer .right p { color: red; width: 100%; margin: 0 auto; float:none; text-align: center; padding: 0em; }
    nav ul li { padding: 1.5em; }   
    .header-container img.change { margin: 0 auto; width:70%; min-width: 443px; min-height: 300px;  }
    section { top: -80px; margin-bottom: -60px; margin-top: 0; } 
    li:hover li { width: 100%;}
    .wrapper { float: none; }
    #gallery li { min-width: 225px; min-height: 200px;}
    #main-img-cont { padding: 0;}
    .introduction { margin: 2.5%; padding: 1%; width: 100%; }
    .section { width: 100%; margin: 0 auto; padding: 1%; height: auto; clear: both; }
    .resize { margin: 0 auto; }
    #intro { width: 100%; text-align: center; }
    #amh { width: 100%; text-align: center; }
    #amh img { width: 25%; margin: 0 auto; }
    #intro span { float: none; }
 }

@media only screen and ( max-width: 826px ){
    #az { width: 100%; }
}

@media only screen and ( max-width: 600px ) { 
    section { top: -10px;  margin-bottom: 1em;} 
    .productp { width: 100%; float: none; }
    .products { text-align: center; }
    #amh img { width: 50%; }
}

@media only screen and ( max-width: 500px ) {
#gallery li { width: 100%; margin: 0 auto; }
#gallery li:first-child { margin-top: 1%; } 
}

@media only screen and ( max-width: 450px ) {
.products { text-align: left; }

}
Matthew Greenberg
Matthew Greenberg
8,173 Points

Check this out

http://css-tricks.com/snippets/html/responsive-meta-tag/

Add that meta tag to your html.

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Looks like Matthew beat me to it. You need to make sure that you've included the viewport meta tag on your HTML code. :-)