The testimonial section is relatively simple. For the tablet 1
it's good as is. Just shrink that space between the headline and the slider. 2
Half of that should be good. 3
Mobile landscape is pretty good as well. 4
Now on portrait mode, we need to change the width of the testimonial cards. 5
Obviously we'll be able to fit only one card at a time. 6
The width is being set by the slide element. 7
If we change that from pixel value to 100%, then it will be as wide as the parent container. 8
So, basically stretching from edge to edge. 9
But what would be nice, is to show user that there are more testimonials. 10
And it's not just one lonely testimonial that is sitting here. 11
So, if we change the width to 90% then that should bring a little part of the next card in 12
the visible screen. 13
That's great, but the content is a little too narrow. So let's make some more space for it by shrinking 14
margins and paddings. 15
First, we can half the margin on the right, so more of the card shows from the next. Which means we can increase 16
the width of the slide more than 90% to maybe 95%. 17
Now for the padding, 30 pixels on all sides look better. 18
And that's all. 19
Up next, the footer. 20
The footer, if you remember, we didn't create from scratch. 21
We copied it from our previous project. 22
The best part about reusing your competence across different projects is this: 23
they are already optimized. All those responsive changes we have made to the first project, 24
they are going to be carried with the component, 25
when you copy them to a different project. 26
No need to do it again. 27
Such a time saver. Although we do have to make a couple of adjustments because we did change the layout 28
of the footer. Like this spacing issue, for example. Probably in previous project, 29
we had a little different plan for this. But here if you check the desktop version, columns are distributed 30
equally from edge to edge. 31
This is a pretty good layout for the tablet as well, so let's reset the style, so it's inheriting from 32
the desktop version. 33
Now, on the mobile landscape, perhaps we could change the justification back to left. 34
The columns are a little too scattered apart. We can go an extra step and try to align the Company column 35
with the Subscribe column below. 36
We just need to shrink the width of the logo column. 37
And that and alignment makes it look nicer. 38
Inside the mobile portrait, 39
let's return that first column width to that original size, because there is space and that tag line 40
looks better on two lines. 41
The subscribe column is now buried on the bottom of the footer. 42
That's not really the best arrangement. 43
It would be better if we brought it to the top, because nobody is gonna bother scrolling all the way 44
down for it. 45
Now here's how awesome flexbox is. Flex child has their own set of settings. 46
There are some sizing settings that a child can override. The general flex box sizing settings and also 47
we can override alignment and order. So if we change the order of our last column, we can actually make 48
it first. 49
But we don't want it exactly first. 50
We'd prefer it came after the logo column. But not to worry, 51
we can do that too. 52
We just need to give the logo column the same order style and it will pop back on top. 53
And there you go. 54
When you do this make sure you have a combo class applied. 55
Otherwise, this change will apply to every single footer column and that won't give expected results. 56
I haven't applied anything, because we already had combo classes on both of these first and last columns. 57
Alright, lets check the responsiveness. 58
Okay. 59
We have this overflow issue with the email field. 60
The fixed width of 267 pixels is too much on that tiny screen. 61
So instead of fixed, we can change to maximum width of 267. And change fixed value to 100%, so 62
it stretches when it has space. 63
Excellent. 64
All looking good now. 65
That's it. 66
The home page is done. And it's going to look great, no matter the device or the screen size. In the next 67
the section, we're going to build a blog. Which is done by a super-powerful Webflow CMS and we're gonna 68
learn all about it. 69
It's gonna be fun. 70
Stick around.