QUICK QUIZ

"So now let's go and test our learning and what we'll do is just jump back over into the editor and I'll open the layout straw, okay? Now notice here I've prepared four layouts earlier, so we don't need to go through and build all these from scratch, but we can use these just to have a quick test to make sure that we can apply this knowledge in all future scenarios. So we've got this layout here with a lot of text in a banner. So I'm going to drop this one on the page. And you can see here I've made a variant of this. This has got a background image, but I've also made a variant in the gradient ready for our content team to use. And then we've got this particular column with a headline fixed to the bottom. And again, I've made this in light and in dark. So we'll take the dark and we'll drop this onto the page.

Okay. So now the first test would be here we've got a fixed height for our parent. So what will the parent and child settings be? Okay, so let's go and have a look here. So let's look at the parent first of all. Well let's go and look at height. Yes, we've got a fixed height of 700 pixels and our fixed height devices is set to desktop only. Well why is that? Well, we know that our content team could add any amount of content on here, so if they had lots of content we don't want it to be a fixed height on mobile. So as they add more content on mobile, it will continue to grow. Therefore, we want the fixed height to be desktop only. Okay, so now for the question, what should the child settings be for fixed height? Should the child be desktop only or all devices?

Okay, well let's go and have a look. And here we can see our child height is 100% at the bottom, but we only want the child height to be desktop only since they might add lots more content. And we want it to start with Eaglewood, the title at the top. So we've got both of our child height and our parent height at desktop only. And the rule of thumb, as you know, is if there's a lot of text, make them both desktop only. And that is why our default setting on the mobile platform is desktop only. It's foolproof for our content team. So at which point we could just come and have a little look at that on mobile. And let's scroll down to our layout. And you can see here it's perfectly formatted on mobile.

Okay, so now let's go and have a look at this particular layout and let's just see what's going on here because our headline is mistakenly here at the top and not at the bottom. So let's go and explore. So here we can see our columns and we've got our child height now set to a hundred percent at the bottom, but of course it's desktop only. Now that's our default setting. So if we were troubleshooting this and someone said, "Hey, why is the headline bar not at the bottom on mobile and it's only at the bottom on desktop only?" You can now say, "Ah, let's make this all devices because there's not a lot of text." If there's only a short amount of text, we don't need to worry about this expanding on mobile. We don't need to worry about how much content our content team are going to add. So we can say make the child height 100% on all devices.

And of course we can go into the parent of this and have a look and we can see that our parent is set to 600 pixels and the fixed height is also on all devices. Meaning on mobile we want this to be 350 pixels high and all the time. So there is your troubleshooting. Let's go and have a look now on our mobile. And here we can see our headline is now at the bottom. So the rule of thumb in this advanced class is if there's not a lot of text, all the devices. If you feel that your content team is going to add a lot more text desktop only."