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.

Richard Hriech
12,001 PointsI'm having problems with responsive design on iPad
So I started a website header for a small company with responsive design, and flexbox. This is the github repo for it: https://github.com/HardRic501/Kisherceg This is a preview of the index.html: https://htmlpreview.github.io/?https://github.com/HardRic501/Kisherceg/blob/master/pages/index.html
My problem is that media query breakpoints work fine EVERYWHERE except when I open the page preview on my iPad which for some reason works only with the mobile-view.
To let you see what I mean, here are a couple of screenshots: This is Chrome dev-tools using the view for iPad in portrait: http://imgur.com/IaGCFwY Chrome dev-tools iPad in landscape: http://imgur.com/TbUALUA Android phone portrait: http://imgur.com/rlwPUWD Android phone landscape: http://imgur.com/xTtkDXe
And the problem: iPad screenshot in portrait that uses mobile view for some reason: http://imgur.com/KcOnLAZ iPad screenshot in landscape, still using the mobile view stretched out: http://imgur.com/JdTszRM
What did I miss, why isn't it working properly?
2 Answers

Richard Hriech
12,001 PointsThe problem was this:
@media screen and (min-width: 580px), @media screen and (min-width: 400px) and (orientation: landscape) {...}
"@media" shouldn't be there twice. It's weird that only the iPad's browser noticed it, and everything else works fine. Stupid Apple stuff :D

Kevin D
8,621 PointsDoes anything change if you add this in your <head> section?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Kevin D
8,621 PointsKevin D
8,621 Pointshehe, it should be 'Yay Apple stuff!' since it picked up the error ;)
Nice that you got it all sorted then :)