The call to action section doesn't look bad right off the bat. 1
We can make a couple of tweaks to increase the size of the image a little. First, I think the headline 2
is a little too big. 3
It wasn't an issue on the above section where there was more space and smaller text. 4
But here it gets hard to fit more than one word per line. 5
This is a good rule of thumb to use - if you can't fit at least two words per line, 6
then the font size might be too big. 7
If we're doing a full website, we would hit more limitations on this headline size. 8
So, I'd rather nip it in the butt. 9
Remember, this headline isn't a class. 10
It's a default H1 tag. 11
So that's what we're going to style. By default, 12
the tag is not selected. 13
We have to do that each time we are styling it. 14
35 pixels, 15
looks pretty good. 16
One more thing. 17
The right block has a minimum with a 400 pixels. 18
Let's shrink that so we can make more space. 19
340 pixels look good. 20
Let's check the fluidity. Nice. 21
Moving on. 22
Here we're going to do what we did with the hero section. 23
Change the direction of the flexbox to vertical and align to the left. 24
The content block didn't align, because it has a margin set on the left. 25
Let's remove that margin. 26
Let's see. The image is way too big 27
on wider version. Let's set the maximum width on the image, 28
but better yet on the left block itself. 29
As I mentioned previously, 30
anytime I can, I try to style the container of the image rather than the image itself. 31
Except for the case in the previous video, where we directly had to style the image. Don't worry. You don't 32
need to memorize every single rule and recommendation I give you. 33
You'll learn by making these mistakes and adopting your own rules and habits. And Webflow is a great 34
help with this learning procedure. 35
You can see everything visually. And you can see the styles that are enabled and that might be causing 36
the issue. Without needing to read the lines of code. 37
Even for those people who want to learn how to code, I would still recommend learning with Webflow first. 38
Because it's just a such an incredible help and guide. And everything in Webflow works precisely in the 39
same way as the regular code does. 40
Anyways, back to our section. 580 to pixel max width is looking fine here. 41
I don't like the orphan word in the headline. So let's shrink the right block so the word "Small" jumps 42
to the next line. Also, let's shrink that spacing between buttons and the stars. 43
It's part of that grey line. 44
Finally, the portrait version. 45
OK. Here we need to remove the minimum width, which is set on the right block. 46
Good. 47
The headline text is pretty big for the portrait. 48
So let's shrink that too. 49
27 pixels 50
look right. And on the stars, 51
let's arrange the layout so its vertical instead of horizontal. 52
This is a flexbox layout, so we can switch that with one click. 53
That's it. 54
All looking snazzy. 55
We just got footer left and we are done.