Chapter 3. Responsive Layout
In this chapter, you will learn about:
- Responsive layout with the min-width and max-width properties
- Controlling your layout with relative padding
- Adding a media query to your CSS
- Creating a responsive width layout with media queries
- Changing image sizes with media queries
- Hiding an element with media queries
- Making a smoothly transitioning responsive layout
Introduction
This chapter has some challenging recipes. Responsive layouts often present some difficult challenges that can push you to create a great solution. With responsive design methods you can do much more, and do it more efficiently. Responsive layouts have introduced a whole new area of challenges to web development and a new dimension of excitement.
Responsive layout with the min-width and max-width properties
Many responsive layout techniques can be quite complex and overwhelming, but in this recipe you will see a fairly simple layout using the min-width
and max-width
properties applied to three...