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!

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

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,646 Points
Kevin D
Kevin D
8,646 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,646 Points
Kevin D
Kevin D
8,646 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">