Making the CTA section responsive

If you switch back to the base breakpoint and scroll down to the Final CTA element, you'll recall that the section contained an image that was laid out using relative positioning and placed alongside some CTA texts and download buttons.

We'll explore how we may be able to adapt this section to smaller screens. We'll also leave it to you to explore adjustments you can make to the large-screen breakpoint.

Let's begin by switching over to Tablet mode.

Tablet screens

Let's begin making this section responsive on tablet screens:

1. Switch to the Tablet view and scroll down to the Final CTA section. At the breakpoint of 768px, the section should resemble Figure 6.28:

   Figure 6.28 – The final CTA section on tablet screens

2. Select the Left element. Change its Top Padding property to 24px.
3. Next, select the H2 Heading element and change its font size to 24px. Also, change its Height property to 1.2-. Recall...