Chapter 6: Making It Responsive
In the previous chapter, we finished building the landing page for SecondPlate, however, we had focused only on its base breakpoint of 1440px
. In other words, if you preview the SecondPlate landing page on other screen sizes, such as a tablet or a mobile, the page will likely not look very good. And in an age where people can access websites from a variety of devices and screen sizes, this isn't ideal.
So, in this chapter, we'll focus our efforts on making the SecondPlate landing page responsive across multiple screen sizes. In particular, we'll make it responsive on a tablet and mobile, as well as very large screens.
Specifically, we'll tackle the following:
- Adjusting the flex layouts in the How it Works section properly for the various screen sizes
- Dealing with large grids on multiple screen sizes
- Setting different layout and positioning settings on different screen sizes
- How to efficiently make adjustments...