Making the Main Features section responsive

Recall that on the base breakpoint, the Main Features section of the landing page was displayed in a large 3x3 grid of content cards.

In this part of the chapter, we'll cover how we can adapt these types of grids to other screen sizes.

Let's begin by viewing the Main Features section in the large-screen breakpoint of 1920px. Here, we can right away see that the grid items looks quite good already, as seen in Figure 6.18:

Figure 6.18 – The Main Features section on large screen sizes

As such, we can leave it at that and move on to tablet breakpoints right away.

Tablet screens

Switch to the Tablet view in the breakpoint shortcut menu. At the smallest tablet breakpoint of 768px, we can see that the grid appears as shown in Figure 6.19:

Figure 6.19 – The Main Features section in the Tablet view

For the most part, this is looking good already. But we can tweak...