All apps need to be designed with a responsive approach and this is because we don't have any control over what device or screen our users are using, be it phone, tablet, or desktop. And we are really lucky that Bubble has made our job a lot easier in this regard.

Let's have a look at the Responsive tab to see what's achievable. So I'm going to click across next to the UI Builder to the Responsive tab. Across the top, we have some numbers and these are basically breakpoints, so what we want to achieve is that at each breakpoint, we want the design to look good.

So if I click across to the 992 breakpoint, I can see that this image has shrunk down but there aren't too many other changes. Fantastic! So on a tablet, the design will probably look pretty good.

Let's now click down to 768 which is a very small tablet. Okay, so we see quite a large shift here. First of all, we have changed to a column layout with this group stacked on top of this image.

Let's have a look at that one more time. I'm going to click across to 992, we're currently in a row layout. Click across to 768 and we have stacked the content, and this is necessary because the page is a lot slimmer now so naturally content will look better when it is stacked.

If I click down to a phone size 320, it still looks really really good but some more changes have happened such as this Get Started button. The width has increased so it spans edge to edge and it's easier for user to click on.

I go back to 768, you can see it's a much smaller button. Down to mobile phone size, and now it's a much wider button.

Now, in later lessons we'll start to dig into the details about how we can make these changes at these various break points.