From the course: CSS Essential Training

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Project: Media queries: Part 3

Project: Media queries: Part 3 - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Project: Media queries: Part 3

“

- [Instructor] Let's start this update by checking how the homepage looks at different breakpoints. Some of the updates we made in the previous lesson were using shared selectors, but the homepage layout is also slightly different from the resume page. We'll start by testing the smallest viewport width, 360 pixels. At this size, we could reduce the amount of spacing around the content-wrapper just to give a little more space to the text content. The footer also needs to be adjusted. The next breakpoint is 500 pixels. Everything at this size looks fine, except for the footer, so we know the change has to start at a larger size. Now let's check the next breakpoint, 650. So aside from the footer, this layout looks fine as well, but let's see how it looks between the two breakpoints. So at just after 500 pixels, the heading styles start to break. The text wraps over two lines. So I could make changes to the space around the…

Contents