Picking up where we left of. 1
We're going to tackle the responsive versions of these two sections from the body. 2
We have to make some space in this section. 3
There is not enough space for everything to fit. 4
For starters, we can shrink the space between the image and the content say from 60 to 30 pixels. Next, 5
we can let these images go off the page, in reality, just like the mockup above. 6
There is no reason why we can't do that. 7
We just need to set a negative margin. 8
That actually looks pretty cool. 9
Now we need to fix the cards. 10
First of all, they're a little too big. 11
They didn't shrink with a background image. 12
So now they occupy too much space. 13
Select the one that has a single base class and style that one, so changes apply to both of them. 14
That looks about right. Now the position. Remember, they are absolute elements and they are moving certain 15
amount from top and right edges. 16
So there is a little issue with the responsiveness. On a wider screen inside the tablet mode, 17
now the cards are little too small. And they would work better if they weren't that close to the edge. 18
We can improve this if we use percentage units instead of pixels. Both for the size of the card and the position. 19
There is no exact calculation we could do here. 20
So, we can just go by eye and see what's the right percentage. And check how it grows and shrinks with a screen 21
size. 22
Nice, 45% width does a pretty good job. 23
Remember how last time we had to change minimum width? This time, 24
actually it's the opposite. 25
The minimum width doesn't work, but the actual fixed width does. The actual width 26
works fine, because it's not being overridden by maximum width, as long as the value smaller than the 27
parent. 28
See, this is why it's the best thing to do, is just to put the image always inside the image wrapper like 29
a regular div block and style that. 30
If you need to change sizes, or move the positions, or whatever you need to style, leave the image itself in a default 31
positions, in default styles, but then style the parent wrapper. 32
You'll save yourself from a lot of confusions, a lot of headaches. Alright, in a similar way we will fix the 33
absolute positions using percentage values. 34
Right. 35
The responsiveness is great and let's make sure the animation is working good as well. 36
Moving on. 37
I think landscape mode is pretty good as is. 38
I would just move the image a little to the right, 39
so the more of the girl is visible. 40
Now moving on to the mobile portrait. The layout here is already vertical. 41
Why? 42
Because we are using the same flexbox container as above. And when we styled it above the same vertical 43
layout was applied to it. 44
We just need to adjust the image here. I'd decrease the negative margin to something like minus 30 pixels. 45
And add a little bit of space underneath, 46
so it's not glued to the headline. 47
And 0 pixels on the right side of it. 48
That's all, the fluidity is looking pretty good. 49
Let's now apply similar adjustments to the second section, starting from tablet. 50
As we haven't touched any of it. First the image wrapper, we need same margins as above, but opposite directions. 51
As you can see there is this overflow, because of the image that is going off the page. 52
So we need to apply that combo class we already have for the overflow section. 53
Easy peasy. 54
Now the calendar card 45% width and 10% for absolute positioning. 55
And that's all. 56
Mobile landscape is doing great on its own. 57
I don't think anything needs to be changed. Now for the mobile portrait. 58
First, let's reverse the layout. 59
Luckily we have the class specifically for this, so we just need to add that combo class to 60
the flexbox. 61
Second, we need exactly the same spacing as the image above. The same style wasn't carried on this one, 62
because this image wrapper has a combo class applied to it and left-right 63
margins are overridden by that combo class. But not the bottom margin. So, that one was carried to this 64
element as well. 65
And there you go. 66
The mobile portrait looks great. Check the responsiveness, check the preview mode for animations and all that, 67
Make sure everything is looking good and working fine. And in the next video, we will move on to the testimonial 68
section.