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 trial

CSS

Posted by Mario Sanchez Carrion
Mario Sanchez Carrion
17,541 Points

Flexbox nav menu not displaying properly on iPads

I created a simple navigation menu using CSS Flexbox properties. It works perfectly as intended when viewed on a computer (it behaves perfectly as the window is resized).

However, when viewed from an iPad in landscape orientation (when the media query for screens with min-width of 769 should kick in) the nav menu is displayed vertically, instead of horizontally, and aligned to the left instead of center.

You can see the live demo here: http://mariobox.github.io/flexboxnav/nav.html

The source files are here: http://www.github.com/mariobox/flexboxnav

Can you please check it out on an iPad and tell me how it looks? Any problem you see in my source code?

Thanks! Mario

Andy Bryant
Andy Bryant
7,894 Points

Mario,

I've had the same problem with a few different projects. It appears that the iPad is adding some hidden breakpoints. And it doesn't seem to be specific to any one browser. Not sure why this is happening, but here is a solution that worked for me: link. Check out Tablets/iPads.

Hope this helps,

Andy B