0
1
00:00:01,130 --> 00:00:03,820
The call to action section doesn't look bad right off the bat.
1

2
00:00:03,920 --> 00:00:08,660
We can make a couple of tweaks to increase the size of the image a little. First, I think the headline
2

3
00:00:08,660 --> 00:00:09,920
is a little too big.
3

4
00:00:09,920 --> 00:00:14,650
It wasn't an issue on the above section where there was more space and smaller text.
4

5
00:00:14,750 --> 00:00:18,380
But here it gets hard to fit more than one word per line.
5

6
00:00:18,380 --> 00:00:22,140
This is a good rule of thumb to use - if you can't fit at least two words per line,
6

7
00:00:22,250 --> 00:00:24,500
then the font size might be too big.
7

8
00:00:24,650 --> 00:00:28,610
If we're doing a full website, we would hit more limitations on this headline size.
8

9
00:00:28,630 --> 00:00:30,650
So, I'd rather nip it in the butt.
9

10
00:00:30,680 --> 00:00:32,740
Remember, this headline isn't a class.
10

11
00:00:32,750 --> 00:00:34,680
It's a default H1 tag.
11

12
00:00:34,730 --> 00:00:37,370
So that's what we're going to style. By default,
12

13
00:00:37,370 --> 00:00:38,690
the tag is not selected.
13

14
00:00:38,690 --> 00:00:41,090
We have to do that each time we are styling it.
14

15
00:00:46,170 --> 00:00:47,340
35 pixels,
15

16
00:00:47,340 --> 00:00:48,770
looks pretty good.
16

17
00:00:48,780 --> 00:00:49,470
One more thing.
17

18
00:00:49,470 --> 00:00:53,330
The right block has a minimum with a 400 pixels.
18

19
00:00:53,430 --> 00:00:55,830
Let's shrink that so we can make more space.
19

20
00:00:58,640 --> 00:01:00,900
340 pixels look good.
20

21
00:01:00,900 --> 00:01:02,210
Let's check the fluidity. Nice.
21

22
00:01:09,150 --> 00:01:09,630
Moving on.
22

23
00:01:11,020 --> 00:01:13,720
Here we're going to do what we did with the hero section.
23

24
00:01:13,720 --> 00:01:17,680
Change the direction of the flexbox to vertical and align to the left.
24

25
00:01:26,300 --> 00:01:30,210
The content block didn't align, because it has a margin set on the left.
25

26
00:01:33,020 --> 00:01:34,190
Let's remove that margin.
26

27
00:01:39,170 --> 00:01:41,100
Let's see. The image is way too big
27

28
00:01:41,120 --> 00:01:44,720
on wider version. Let's set the maximum width on the image,
28

29
00:01:44,720 --> 00:01:46,820
but better yet on the left block itself.
29

30
00:01:46,820 --> 00:01:48,060
As I mentioned previously,
30

31
00:01:48,060 --> 00:01:52,800
anytime I can, I try to style the container of the image rather than the image itself.
31

32
00:01:52,880 --> 00:01:59,960
Except for the case in the previous video, where we directly had to style the image. Don't worry. You don't
32

33
00:01:59,960 --> 00:02:03,170
need to memorize every single rule and recommendation I give you.
33

34
00:02:03,170 --> 00:02:08,330
You'll learn by making these mistakes and adopting your own rules and habits. And Webflow is a great
34

35
00:02:08,330 --> 00:02:10,070
help with this learning procedure.
35

36
00:02:10,070 --> 00:02:15,050
You can see everything visually. And you can see the styles that are enabled and that might be causing
36

37
00:02:15,320 --> 00:02:18,220
the issue. Without needing to read the lines of code.
37

38
00:02:18,260 --> 00:02:22,970
Even for those people who want to learn how to code, I would still recommend learning with Webflow first.
38

39
00:02:23,180 --> 00:02:28,670
Because it's just a such an incredible help and guide. And everything in Webflow works precisely in the
39

40
00:02:28,670 --> 00:02:30,980
same way as the regular code does.
40

41
00:02:30,980 --> 00:02:36,080
Anyways, back to our section. 580 to pixel max width is looking fine here.
41

42
00:02:36,080 --> 00:02:40,730
I don't like the orphan word in the headline. So let's shrink the right block so the word "Small" jumps
42

43
00:02:40,730 --> 00:02:47,050
to the next line. Also, let's shrink that spacing between buttons and the stars.
43

44
00:02:47,070 --> 00:03:05,390
It's part of that grey line.
44

45
00:03:05,470 --> 00:03:07,290
Finally, the portrait version.
45

46
00:03:07,310 --> 00:03:16,650
OK. Here we need to remove the minimum width, which is set on the right block.
46

47
00:03:16,820 --> 00:03:17,470
Good.
47

48
00:03:17,480 --> 00:03:20,120
The headline text is pretty big for the portrait.
48

49
00:03:20,210 --> 00:03:21,590
So let's shrink that too.
49

50
00:03:35,970 --> 00:03:37,200
27 pixels
50

51
00:03:37,200 --> 00:03:40,430
look right. And on the stars,
51

52
00:03:40,470 --> 00:03:44,500
let's arrange the layout so its vertical instead of horizontal.
52

53
00:03:44,520 --> 00:03:47,970
This is a flexbox layout, so we can switch that with one click.
53

54
00:04:00,710 --> 00:04:01,280
That's it.
54

55
00:04:01,290 --> 00:04:02,740
All looking snazzy.
55

56
00:04:02,790 --> 00:04:05,250
We just got footer left and we are done.