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.

CSS

Richard Hriech
Richard Hriech
12,001 Points
Posted by Richard Hriech
Richard Hriech
12,001 Points

I'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
Richard Hriech
12,001 Points
Richard Hriech
Richard Hriech
12,001 Points

The 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
Kevin D
8,621 Points
Kevin D
Kevin D
8,621 Points

hehe, it should be 'Yay Apple stuff!' since it picked up the error ;)

Nice that you got it all sorted then :)

Kevin D
Kevin D
8,621 Points
Kevin D
Kevin D
8,621 Points

Does 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">