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 trialRichard 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,646 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,646 PointsKevin D
8,646 Pointshehe, it should be 'Yay Apple stuff!' since it picked up the error ;)
Nice that you got it all sorted then :)