Making it responsive

Making pages responsive in Webflow is easier than it sounds, but it does require being thoughtful and deliberate.

One of the main ideas, as explained before, is to always start from the base breakpoint. In this case, our base breakpoint started at 1440px, which is the typical size of many non-retina laptop screens.

Any styles set on this breakpoint will cascade down to smaller screen sizes. This is why when you switch to tablet or mobile breakpoints, the layouts of the page look wrong; they are blindly applying the same layouts of the base breakpoint to the smaller screens.

In order to ensure the page is fully responsive, we'll adjust the layouts on each breakpoint, starting with the tablet.

Tablet breakpoint

When you switch to the tablet screen, you'll see something resembling Figure 4.34:

Figure 4.34 – Tablet breakpoint

For the most part, it doesn't look too bad. Webflow even does some of the work...