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

General Discussion

Posted by Craig Watson
Craig Watson
27,930 Points

Full Page Cover Image Using Flexbox and Bootsrap! A few little extras too! Take a L@@K

Hi everyone!

Today's workings is here on codepen

This is a full width / height landing image as seen on lots of site now :) But this is not using a table hack for layout blluurrrghhh....

No this uses Flexbox :) , there is a few little extras on the page to like scroll spy and a dynamic nav.

Let me know your thoughts :)

Craig

Craig Watson
Craig Watson
27,930 Points

Thanks for the kind words guys!

This was all looking good till I tested it on iOS Safari on iPad WOW... The poor thing has dies a horrible death....

Apparently, iOS Safari hates bakground-size: cover!!! A lot!!! Along with making your body tag or html tag 100%.

This is very buggy, and requires hacks and the dreaded display table I have tried to avoid. I have began refactoring all the code to suit "all browsers" as will drop a comment when it is finished and is working better!

Thanks Again

4 Answers

Michael Norman
PLUS
Michael Norman
Courses Plus Student 9,399 Points
Michael Norman
Michael Norman
Courses Plus Student 9,399 Points

I really like it! Looks and feels great, even on mobile. Sorry I can't provide you more constructive criticism, but fantastic job!

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Your website looks great and the only thing I noticed was on mobile view, your menu is kind of hard to see. Try changing the color to brighter color. Other than that, congratulations on the epic site.

christopher walsh
christopher walsh
10,763 Points
christopher walsh
christopher walsh
10,763 Points

it loos really cool, I also like the zen theme. if you have a blog or would somehow share how you coded this, that would be cool too!

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Guys!

Turns out Codepen have problems with their live and full scree views when sent to other devices :( so a wasted day of coding trying to fix things that were not even broke............

So I moved to Treehouse Workspace to really see what it is like to develop on, im please to say I enjoyed and here is the result LOOK if you don't already know I have to have the editor open for this to work so I am trying out the new snapshot feature treehouse have kindly provided too :)

Hopefully this has worked Snapshot

You will be please to know there is no ugly table layouts for the cover section.

To add flexbox is handling some of the mundane tasks like working out percentage padding brilliantly as you see if you dive into the code :)

Hope you like it!

Craig