COLUMNS ON MOBILE

"Let's just go and have a quick look at that. I think that's okay at this stage. But when this is on the mobile, we've got two choices to think about here. When it's on the mobile, we've got two choices to think of. Do we want to show this particular accent? And then, if we did on mobile, because it's two columns, it's going to stack them. So, we could decide do we want to fix it? Well, let's go and see this. If I go to my parent here and on the parent, I can say device stack. Well, we could make it double or fixed both at the same in this instance, but I'm going to make mine fixed.

Now, the reason I would choose fix over double all the time is simply because your content users could add more columns. So, if you want it to be fixed for two columns, if they add a three, you're most likely want it to be fixed, so you're working with general common sense and probability. Whereas double stack, if they add a third column, it's going to double stack one and put the other underneath. Okay? Fixed will mean that on mobile now, this is going to be fixed. Well, I'm not too sure that's going to work, right?

At this point, we will use our preview icon and have a look what it looks like on our mobile. Here, we can see it's a bit messy. I'm not too convinced that's ever going to work, whereas I'd much prefer my button to be full width here, and it's a real strong call to action for Book Now. So, we don't want to use the fixed in this instance. For this mobile behaviour, what we want to do is, with this particular frame here, don't show it on mobile. And then, we could say, "What do we want to do on tablet?" Well, we may as well go for conversions. It's a cool feature on desktop, but it's really a bit of overkill on mobile and tablet, so I'm going to get rid of that one. Let's have a look at our preview. Let's go and have a look and that's much better button."