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

Sam Lillicrap
Sam Lillicrap
12,127 Points

Why does my site disappear in landscape mode on iPad

Hi guys,

I recently came across a bug where if you view my site in landscape mode on the iPad (I'm using an iPad mini with retina) - the top section disappears from the page? I keep thinking it's something to do with my media queries but I just can't see how it can be. Can anyone help me out? Much appreciated! :-)

Here's the link to my site: http://www.samueljwebdesign.co.uk

Cheers

2 Answers

Wayne Priestley
Wayne Priestley
19,567 Points

Hi Sam,

Might it have something to do with this?

<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

maybe you could remove it just to test it.

Thats all i can think of if you've already counted out media quires. If you used a framework it could be a mistake in one of the html class names.

Sam Lillicrap
Sam Lillicrap
12,127 Points

Cheers Wayne,

You were right but I need that code to make sure that the viewport cannot be scaled and displays at the right scale for mobile devices. It just seems strange that it suddenly doesn't work at a wider width... I'll have a play with the media queries again but if all else fails I might need to specify a new media query for landscape orientation and style it until it works!

Also no framework was used here really (used boilerplate code for favicons)

Wayne Priestley
Wayne Priestley
19,567 Points

This is probably not right but what about having individually specifying the scale etc instead of comma separating them…

Clutching at straws now lol

Sam Lillicrap
Sam Lillicrap
12,127 Points

I effectively already checked that by deleting out all the comma separated values and adding them one by one - but no luck yet :-(

Sure I'll figure it out!

Try putting the viewport first like so.. meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"

Sam Lillicrap
Sam Lillicrap
12,127 Points

Sadly that makes no difference :-( Cheers though