We need to make sure our designs look fantastic on mobile and, luckily, Bubble has given us some intuitive tools to do so.

Let's take a look! So we're looking at my landing page. I'm now going to click into the Responsive tab. Okay, so across the top we have some break points. We have 1200, 992 for tablet, 768 for small tablet, and we can see the design changing quite significantly, and we have 320 which is, basically, the smallest mobile phone on the market. A lot of the phones we use today would be around the 400 mark.

We can see that the page width is changing on the left-hand side as I pull out this particular bar at the top, so feel free to use whatever break point you like. Here we need to stick to 320 because it's good practice to actually work at the smallest size. So that looks really good.

So scrolling down the page and here we're running into some problems. We can see that our Key Features doesn't look good for mobile, but on desktop it looks really good. Okay, let's go back to 320. Let's solve this problem.

Now, why is this happening? It's happening because I had applied some custom styling to the Key Features and now some of the responsive settings are missing. That's okay. Let's click on this card and here we have the the property editor Group feature-1. Alright, let's make this work.

So what I'm looking for is each card to take up the full width of the mobile screen which means instead of having three side-by-side, we're going to have these three stacked on top of each other. The same will happen for these three down here so, ultimately, we'll have six cards stacked on top of each other.

Now, to do this, we need to go to the Conditional tab and the Conditional tab provides all the flexibility we need based on a certain conditional. So if I click on Define another condition, we have a statement that we need to write. Now, you'll become very very familiar with the statement. Okay, so I'm going to click here, going to type the word page, and then we're going to find Current page width because we want to change the design based on the width of the screen so this is where we start—current page width—and we read it left-to-right when current page width.

Okay, now I'm going to choose an operator and the one I'm going to choose is the less than sign. Alright, we're getting a bit further so let's think about this logically. When the current page width is smaller than now, we have to tap into the breakpoint so let's say, let me type 768. Okay, now there is no right or wrong way—this is just purely my design choice. I'm going to say that below this break point, 768, that's when I want the cards to stack on top of each other and that means that that will definitely apply to all mobile phone sizes as most mobile phones range from 320 to about 480. You will get very very used to this expression and you'll be using it across your app so when the current page width is smaller than 768, let's change stuff.

Now, the secret weapon here is to type min and Bubble allows us to set the Min width. Okay, what we're going to do is change pixels to percentages and we're just going to type in 100 and there we go. So below 768, we want the min width of this card element to span 100% of the available width of the parent.

Now, don't worry if this isn't making a complete sense right now, but as you get practice you'll be applying this exact expression across your app.

Now, how can I save myself some time by applying this to the other ones? I'm just going to right-click on this card and say copy conditional expressions and then I can right-click on this card and say paste special, paste conditional expression and I can do the same to this card. We also need to do this card even though it did look like it changed. To save myself some time, I'm going to paste it on all three. There we go!

Let's remind ourselves what it looks like on a desktop. There it is there. And then on condition of it being less than 768, the cards will now stack neatly.

So that is basically my strategy. One of the only strategies that I used for responsive design. Go to the Responsive tab and I tap into the condition of comparing screen sizes, when the current page width is smaller than a particular break point, that's when I make the design change.

Let's have a look at one other strategy that I tend to take as well. So sometimes at mobile phone sizes you also want to change text size. Now, I actually think that this text looks great, but maybe I just want to change and make this text look a little bit smaller. So what I can do is this. So we already have a statement here. I'm going to right-click copy expression and then I'm going to click on this text, paste the expression because we want changes to happen at the same break points and then, now, I can do anything I like here. So this is where I could actually change the font size to 14 pixels. I still think 16 looks better, but this is just an example of how this would work. So only below 768 would the text size change to 14. We could even change the alignment, change the color, do whatever we like.

Let's change the text alignment to be left aligned and there we go.

So that is just an introduction to responsive design but remember: most traffic you get to your marketing pages specifically will come from someone's phone!