Adjustments for the header and hero

- So, now we're going to create a series…of CSS rules for very small screens.…There's still a lot of mobile devices out there…that have a CSS width of about 320 pixels.…So, we'll create a series of rules…that will target devices under 425 pixels wide.…So, we'll start by going back to our CSS file.…We're going to add one more media query in here…with a maximum width of 425.…So we'll type media, space,…screen,…and,…put in our parentheses,…max-width,…425 pixels.…

Then put in our brackets.…Now, the first thing we'll target here…is going to be the header area.…So, I'll add a CSS comment here…called header.…Then, we'll create a CSS rule,…targeting the header element.…The first thing we'll do here,…is set a height of 110 pixels.…This matches the smaller banner graphic…that we've got in our exercise files.…And then we'll come down here…and redefine the background image.…So, background dash image, url,…put in our parentheses,…dot, dot, slash,…images, slash, banner, underscore, 425 dot jpg.…

And next, we'll switch out the logo…for the horizontal version.…