From the course: CSS Essential Training

Unlock the full course today

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

Fluid layouts

Fluid layouts - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Fluid layouts

“

- [Instructor] We've talked about how to use media queries to make changes for any viewport width, but do we always need to use a media query? Remember, there are three ingredients for responsive web design: fluid layouts, flexible images, and media queries. Building your website on a flexible foundation first means you don't need to use media queries to target every possible size. Let's go over some techniques for creating a fluid layout, also referred to as a liquid layout. When setting the width of the page components, use percentage values or relative units where possible. Another option is to use the min and max-width properties which is the technique we applied to our content wrappers. In this scenario, using max-width allowed us to have precise control over how wide the content wrappers spanned on larger screens. Because we don't want it to get any larger than the maximum value on any screen, it makes sense…

Contents