Examining the header and background image style on the Home page


show more Examining the header and background image style on the Home page provides you with in-depth training on Developer. Taught by Joe Marini as part of the Mobile Web Design & Development Fundamentals show less
please wait ...

Examining the header and background image style on the Home page

Okay, let's begin by taking a look at the homepage and understanding what the key differences were in making it work on both desktop and mobile. So let me just size this down to the mobile version for just a second. You can see a couple of things right away: first, the logo is smaller; second, the navigation bar is vertical now instead of horizontal, and the appearance is also different. And if I scroll down, you'll see that the content is now in one single vertical column, not two columns, and the Tour Spotlight is now above the Monthly Specials.

The video element is now gone and if we scroll down little bit more, you can see that the footer navigation has changed it layout just a little bit, so let's scroll back up. So let's think over the code, and I'm going to show you the key places in the code where we have to make some changes in order to make that work. Let's begin by taking a look at the logo section. So here in the main.css file you'll see that the l...

Examining the header and background image style on the Home page
Video duration: 10m 10s 5h 47m Beginner

Viewers:

Examining the header and background image style on the Home page provides you with in-depth training on Developer. Taught by Joe Marini as part of the Mobile Web Design & Development Fundamentals

Subjects:
Developer Web
Software:
HTML
Author:
please wait ...