Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Becky Castle
Becky Castle
15,294 Points

When viewing my codepen design on my iphone, my media queries did not seem to work. Anyone know why?

I opened the "full page" version of a webpage I designed in codepen on my iphone, to see [at least one of] my media queries in action, but was sadly disappointed. Instead of resizing my webpage based on the screen size of my iphone, my webpage was pulled up in the full desktop size. Anyone know what I need to do to fix this?

Here's my codepen in full page. And here's my coding.

Thanks!

6 Answers

Your media query works, but you need to add this to your head

<meta name="viewport" content="width=device-width">

This is cause the iphone noramally renders pages like there is a width of 980px

Becky Castle
Becky Castle
15,294 Points

Hi Arthur, I've added this tag to my head but have seen no improvement. I've even tried pasting it in before/ after the other tags in my head, because I thought it may not be working because of the order I had it in. Any further suggestions for me?

On line 144, the width isn't specified. In line 149 there is an error too. (in your css)

on my iphone, everything works good. https://www.dropbox.com/s/74ogrwks1jk8mb2/Screenshot%202014-04-19%2019.09.26.png

I think it simply doesn't work in codepen cause in codepen you only need to input the content of the body tag in the html area.

On CodePen specifically, we have a "Stuff for head" section in the HTML settings for putting stuff in the head section of the final rendered demo. You'll need to put the meta tag in there for it to take affect in Full Page view.

Becky Castle
Becky Castle
15,294 Points

Hey you guys rock! Thanks for the help.