From the course: CSS Essential Training

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Project: Breakpoints

Project: Breakpoints

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Project: Breakpoints

“

- [Instructor] For this exercise, we'll use the developer tools to test our current project layout to help decide what breakpoints to use. If you don't have the dev tools open from the last video, open it now. Rather than resizing the viewport, I'm gonna stick with using the device emulator by clicking the phone and tablet icon. I'll also start the test by setting the resolution to 1,200 pixels by 800 pixels. From here, we can gradually reduce the width to see where the layout breaks. The first area we should check is the resume section, since it's the widest part of our page. We set it to a max width of 1,000 pixels, so once the viewport gets smaller, it will be the size of the container. For larger screens, we set the second column to be wider to make space for the longer blocks of content in the work experience section. Once it gets to just under 900 pixels, the column becomes too narrow for my preference. At this…

Contents