1
00:00:02,120 --> 00:00:05,420
Let's continue with the work on our list items,

2
00:00:05,420 --> 00:00:08,910
specifically on our images though.

3
00:00:08,910 --> 00:00:12,010
The first thing I would like to change is the distance

4
00:00:12,010 --> 00:00:13,450
between our images.

5
00:00:13,450 --> 00:00:16,493
Each image is sitting directly next to each other.

6
00:00:16,493 --> 00:00:19,970
I think a little bit of margin would help here too

7
00:00:19,970 --> 00:00:22,593
will improve the look of our images.

8
00:00:23,600 --> 00:00:27,150
We will not apply to margin directly on the image though.

9
00:00:27,150 --> 00:00:29,780
I would like to add the margin on the actual

10
00:00:29,780 --> 00:00:31,260
container of the image.

11
00:00:31,260 --> 00:00:32,540
This will basically

12
00:00:32,540 --> 00:00:35,155
well, add this distance between the list items

13
00:00:35,155 --> 00:00:38,760
and therefore also between our images.

14
00:00:38,760 --> 00:00:42,050
For this, I'm back in the code,

15
00:00:42,050 --> 00:00:44,733
and I will add a new selector here.

16
00:00:44,733 --> 00:00:45,650
This time,

17
00:00:45,650 --> 00:00:49,373
not the ID selector but a class selector.

18
00:00:51,040 --> 00:00:53,660
Our destination class selector

19
00:00:53,660 --> 00:00:56,140
we added for all our list items.

20
00:00:56,140 --> 00:00:59,950
And here I'll add a margin of zero top bottom

21
00:00:59,950 --> 00:01:03,380
and 20 pixels left and right.

22
00:01:03,380 --> 00:01:04,590
Let's see if it does the trick.

23
00:01:04,590 --> 00:01:05,423
Yep.

24
00:01:05,423 --> 00:01:06,256
This works great.

25
00:01:06,256 --> 00:01:08,140
And you can see now that we have

26
00:01:08,140 --> 00:01:09,840
this margin around our list items

27
00:01:09,840 --> 00:01:13,430
and therefore our images also decrease the width

28
00:01:13,430 --> 00:01:16,420
as the space of the parent was reduced.

29
00:01:16,420 --> 00:01:18,750
Therefore less space is available for

30
00:01:18,750 --> 00:01:20,018
the content of the parent,

31
00:01:20,018 --> 00:01:23,692
which is our image in the end and whole paragraph.

32
00:01:23,692 --> 00:01:25,400
Besides that,

33
00:01:25,400 --> 00:01:28,135
I would like to add some visual improvements

34
00:01:28,135 --> 00:01:30,940
directly on the images though.

35
00:01:30,940 --> 00:01:34,080
One of these being our good old friend,

36
00:01:34,080 --> 00:01:34,913
the box shadow,

37
00:01:34,913 --> 00:01:38,420
which we'll add with two pixels left, right

38
00:01:38,420 --> 00:01:40,500
Four pixels top bottom,

39
00:01:40,500 --> 00:01:43,890
eight pixels blur radius,

40
00:01:43,890 --> 00:01:46,600
and an RGB code of

41
00:01:48,570 --> 00:01:53,417
68, 67 and 67.

42
00:01:55,656 --> 00:01:57,330
And besides this,

43
00:01:57,330 --> 00:02:01,601
I'll also add a border radius again for our rounded corners

44
00:02:01,601 --> 00:02:05,800
of 10 pixels here and with that

45
00:02:05,800 --> 00:02:06,633
Yeah,

46
00:02:06,633 --> 00:02:08,376
I think our images are a lot more in line

47
00:02:08,376 --> 00:02:12,113
with the styling of our page in general.

48
00:02:13,170 --> 00:02:16,530
We have another issue with our images though

49
00:02:16,530 --> 00:02:18,304
for this I'll zoom in a bit.

50
00:02:18,304 --> 00:02:21,070
Though, you can't see it immediately.

51
00:02:21,070 --> 00:02:26,070
Our images are kind of squashed into the container now,

52
00:02:27,280 --> 00:02:30,960
because if you look at the original images here in

53
00:02:30,960 --> 00:02:32,200
our images folder,

54
00:02:32,200 --> 00:02:33,380
places in Miami,

55
00:02:33,380 --> 00:02:34,630
for example,

56
00:02:34,630 --> 00:02:38,260
you see it's a very wide image in the end.

57
00:02:38,260 --> 00:02:39,093
At the moment,

58
00:02:39,093 --> 00:02:40,350
if we check this version,

59
00:02:40,350 --> 00:02:43,004
well, it is a bit distorted to to say

60
00:02:43,004 --> 00:02:45,830
It doesn't remain the actual ratio

61
00:02:45,830 --> 00:02:48,448
because it kind of has to fit into here.

62
00:02:48,448 --> 00:02:50,980
Now, whilst on these images,

63
00:02:50,980 --> 00:02:51,814
it still looks okay,

64
00:02:51,814 --> 00:02:55,115
this can look very strange on other images.

65
00:02:55,115 --> 00:02:57,910
The great thing is that we have options

66
00:02:57,910 --> 00:02:59,827
or ways to tell CSS

67
00:02:59,827 --> 00:03:03,010
how images should be added to the container

68
00:03:03,010 --> 00:03:05,500
or displayed in the container.

69
00:03:05,500 --> 00:03:10,250
This is defined by the so-called object fit property,

70
00:03:10,250 --> 00:03:14,330
which you will add now to our image selector here.

71
00:03:14,330 --> 00:03:16,840
So it's object fit.

72
00:03:16,840 --> 00:03:20,060
And the default one is fill.

73
00:03:20,060 --> 00:03:23,416
Fil simply means that the image is basically

74
00:03:23,416 --> 00:03:25,520
well resized

75
00:03:25,520 --> 00:03:28,250
to fit into the given dimension.

76
00:03:28,250 --> 00:03:32,050
But this can also mean that the image is stretched if

77
00:03:32,050 --> 00:03:35,570
necessary or squished into the container.

78
00:03:35,570 --> 00:03:36,403
At the moment,

79
00:03:36,403 --> 00:03:38,960
we have the case of the images being squished

80
00:03:38,960 --> 00:03:39,824
into the container.

81
00:03:39,824 --> 00:03:42,370
As I said, it doesn't look too bad,

82
00:03:42,370 --> 00:03:46,030
but it's not the actual aspect ratio that is reflected here.

83
00:03:46,030 --> 00:03:50,436
For this, we have other values for our object fit property.

84
00:03:50,436 --> 00:03:52,879
Another very typically one here is

85
00:03:52,879 --> 00:03:56,070
contain written like this,

86
00:03:56,070 --> 00:03:56,970
save this.

87
00:03:56,970 --> 00:04:01,200
and contain means that the aspect ratio remains.

88
00:04:01,200 --> 00:04:04,490
So the image won't be kind of pushed into the container.

89
00:04:04,490 --> 00:04:05,323
So to say,

90
00:04:05,323 --> 00:04:10,323
but the image will be resized to fit into the container.

91
00:04:10,438 --> 00:04:11,330
This means,

92
00:04:11,330 --> 00:04:12,859
depending on the container ratio,

93
00:04:12,859 --> 00:04:16,430
you will have empty spots in the container.

94
00:04:16,430 --> 00:04:17,399
In our example,

95
00:04:17,399 --> 00:04:18,760
you can see this right here.

96
00:04:18,760 --> 00:04:22,630
These two images now have bigger blank spots top and bottom.

97
00:04:22,630 --> 00:04:24,145
Here, we have smaller blank spots,

98
00:04:24,145 --> 00:04:26,907
but if you can see the problem now that we had.

99
00:04:26,907 --> 00:04:30,749
Now, the images have their initial aspect ratio back,

100
00:04:30,749 --> 00:04:32,193
which makes them a lot wider

101
00:04:32,193 --> 00:04:34,150
before we had this kind of

102
00:04:34,150 --> 00:04:37,060
well, squashed together look,

103
00:04:37,060 --> 00:04:38,290
I can show you this again.

104
00:04:38,290 --> 00:04:42,140
If we changed the spec to fill here,

105
00:04:42,140 --> 00:04:42,973
you'll see.

106
00:04:42,973 --> 00:04:45,263
Yeah, it's just increased in height.

107
00:04:47,779 --> 00:04:49,501
So if we reload the page,

108
00:04:49,501 --> 00:04:53,020
you'll see that the images are kind of distorted.

109
00:04:53,020 --> 00:04:55,200
So both solutions are not perfect here,

110
00:04:55,200 --> 00:04:57,960
but there is a furred value which kind of helps us to

111
00:04:57,960 --> 00:05:00,932
well, fit the images perfectly into our container.

112
00:05:00,932 --> 00:05:04,203
And this value is called cover.

113
00:05:06,254 --> 00:05:11,127
Cover means that the image will remain it's aspect ratio

114
00:05:11,127 --> 00:05:13,740
and fill its container,

115
00:05:13,740 --> 00:05:16,630
and it will be clipped to fit into a container.

116
00:05:16,630 --> 00:05:17,500
So to say,

117
00:05:17,500 --> 00:05:22,500
this simply means that CSS make sure that we have as much

118
00:05:23,920 --> 00:05:25,664
image as possible in the container

119
00:05:25,664 --> 00:05:28,470
whilst remaining this aspect ratio.

120
00:05:28,470 --> 00:05:31,109
What this means in the end is that as you saw just here,

121
00:05:31,109 --> 00:05:34,820
the images in the end are zoomed in a bit here in our case,

122
00:05:34,820 --> 00:05:37,370
as we had these empty spots before, top and bottom.

123
00:05:37,370 --> 00:05:39,564
So we have to show the image a bit bigger,

124
00:05:39,564 --> 00:05:40,690
but with that,

125
00:05:40,690 --> 00:05:41,963
the image is not distorted

126
00:05:41,963 --> 00:05:43,783
and we don't have any gaps,

127
00:05:43,783 --> 00:05:45,883
any blank areas.

128
00:05:47,720 --> 00:05:49,110
With this being in place,

129
00:05:49,110 --> 00:05:51,230
We worked a lot on our images

130
00:05:51,230 --> 00:05:52,986
and I think these look all right now.

131
00:05:52,986 --> 00:05:54,360
What is missing now,

132
00:05:54,360 --> 00:05:57,260
is the work on our text elements

133
00:05:57,260 --> 00:05:58,093
specifically,

134
00:05:58,093 --> 00:06:00,330
I'm referring to the H two element here

135
00:06:00,330 --> 00:06:01,163
and of course,

136
00:06:01,163 --> 00:06:04,803
to our paragraphs inside our list items.