From the course: Creating a Responsive Web Design
Join today to access over 22,600 courses taught by industry experts.
Adjustments for the header and hero - CSS Tutorial
From the course: Creating a Responsive Web Design
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.