1 00:00:02,090 --> 00:00:04,260 We created a flex container, 2 00:00:04,260 --> 00:00:05,900 this unordered list here, 3 00:00:05,900 --> 00:00:09,179 and this list contains three list items 1, 2, 3, 4 00:00:09,179 --> 00:00:13,430 where each list item contains an image and a paragraph 5 00:00:13,430 --> 00:00:17,883 here, there, and also in the third one. 6 00:00:19,000 --> 00:00:21,110 And actually our logic would be 7 00:00:21,110 --> 00:00:24,840 that if we define a width for the container, 8 00:00:24,840 --> 00:00:27,670 we could assume that each single list item 9 00:00:27,670 --> 00:00:30,290 occupies one third of that space 10 00:00:30,290 --> 00:00:31,800 available in that container. 11 00:00:31,800 --> 00:00:33,430 At least this would be the idea 12 00:00:33,430 --> 00:00:35,190 we would like to follow here. 13 00:00:35,190 --> 00:00:36,950 For some reason this is not working 14 00:00:36,950 --> 00:00:38,620 because we have some space left here 15 00:00:38,620 --> 00:00:40,640 to the right of this last image. 16 00:00:40,640 --> 00:00:43,050 So apparently something went wrong. 17 00:00:43,050 --> 00:00:44,550 Well nothing went wrong. 18 00:00:44,550 --> 00:00:47,340 This is again just pure CSS logic 19 00:00:47,340 --> 00:00:49,240 and before we fix this lets quickly 20 00:00:49,240 --> 00:00:51,383 investigate what is going on right here. 21 00:00:52,510 --> 00:00:54,890 Let's go to the first list item 22 00:00:54,890 --> 00:00:57,320 we see here to the left in the browser. 23 00:00:57,320 --> 00:00:58,340 Please always check this. 24 00:00:58,340 --> 00:00:59,800 If I hover here, 25 00:00:59,800 --> 00:01:03,390 we have a width of 300 pixels for the list item, 26 00:01:03,390 --> 00:01:07,410 300 pixels for the image and 300 for the paragraph. 27 00:01:07,410 --> 00:01:10,850 The second list item has a width of 299 pixels 28 00:01:10,850 --> 00:01:12,600 for the list item, 29 00:01:12,600 --> 00:01:14,010 299 for the image, 30 00:01:14,010 --> 00:01:16,280 299 for the paragraph. 31 00:01:16,280 --> 00:01:20,510 The third one has a width of 267 for the list item, 32 00:01:20,510 --> 00:01:24,850 267 for the image and 267 for the paragraph. 33 00:01:24,850 --> 00:01:25,890 Now, for some reason, 34 00:01:25,890 --> 00:01:29,580 especially the last list item is a lot smaller 35 00:01:29,580 --> 00:01:31,850 from a width perspective when comparing 36 00:01:31,850 --> 00:01:33,520 it to the other ones. 37 00:01:33,520 --> 00:01:35,010 What's the reason for this? 38 00:01:35,010 --> 00:01:37,350 Well, think about what is defining 39 00:01:37,350 --> 00:01:39,400 the width of the list item. 40 00:01:39,400 --> 00:01:42,290 The list item contains the image and the paragraph, 41 00:01:42,290 --> 00:01:44,490 and therefore the width of the content 42 00:01:44,490 --> 00:01:47,440 is defining the width off this list item, 43 00:01:47,440 --> 00:01:51,110 meaning that either the paragraph or the image are the 44 00:01:51,110 --> 00:01:53,973 elements which caused this reduced width here. 45 00:01:55,430 --> 00:01:57,690 Now the paragraph cannot be the issue. 46 00:01:57,690 --> 00:02:00,540 The paragraph takes the entire space available, 47 00:02:00,540 --> 00:02:04,340 but as you see Barcelona, Spain, this text is not very long. 48 00:02:04,340 --> 00:02:07,750 So the content of this element doesn't occupy 49 00:02:07,750 --> 00:02:09,250 the entire space available. 50 00:02:09,250 --> 00:02:11,887 Therefore, what must drive our width 51 00:02:11,887 --> 00:02:13,800 of the list element in the end 52 00:02:13,800 --> 00:02:15,763 is the width of our image. 53 00:02:17,240 --> 00:02:21,550 Because here we defined a fixed height for all images. 54 00:02:21,550 --> 00:02:24,550 Each image has a height of 200 pixels. 55 00:02:24,550 --> 00:02:27,993 Now, if we inspect our source images though, 56 00:02:29,220 --> 00:02:32,743 by right clicking onto these onto get info, 57 00:02:33,810 --> 00:02:38,253 we have a resolution of 1920 times 1284 for Miami, 58 00:02:43,410 --> 00:02:47,110 1920 and 1283 for Munich 59 00:02:49,300 --> 00:02:54,300 and 1920 and 1440 for Barcelona. 60 00:02:55,020 --> 00:02:59,280 So this means Munich and Barcelona 61 00:02:59,280 --> 00:03:02,700 are higher than the Miami image 62 00:03:02,700 --> 00:03:06,400 and if we add a fixed height to these images here 63 00:03:06,400 --> 00:03:09,790 this simply means that these images must shrink 64 00:03:09,790 --> 00:03:12,190 more than the Miami image, right? 65 00:03:12,190 --> 00:03:14,390 Because we have to reduce more height 66 00:03:14,390 --> 00:03:16,750 with more height being reduced by default. 67 00:03:16,750 --> 00:03:20,320 While the image also will be reduced from a width 68 00:03:20,320 --> 00:03:21,330 perspective. 69 00:03:21,330 --> 00:03:26,330 That's the reason why our Munich image is only 299 70 00:03:27,500 --> 00:03:31,950 and our Barcelona image is only 267 pixels wide 71 00:03:31,950 --> 00:03:34,480 it's not the problem why our list elements and therefore 72 00:03:34,480 --> 00:03:37,800 our flex items do not equally occupy 73 00:03:37,800 --> 00:03:40,103 one third of the space in the container 74 00:03:40,103 --> 00:03:42,880 it's the way our images are displayed. 75 00:03:42,880 --> 00:03:44,970 We can easily fix this problem though, 76 00:03:44,970 --> 00:03:48,090 by defining the width for our images, 77 00:03:48,090 --> 00:03:51,160 we could define the width with a fixed value. 78 00:03:51,160 --> 00:03:52,750 For example, 79 00:03:52,750 --> 00:03:55,110 if we go to our image selector and add a width 80 00:03:55,110 --> 00:03:57,313 of maybe 250 pixels, 81 00:03:58,700 --> 00:04:02,280 then, well, this will solve the issue of the different 82 00:04:02,280 --> 00:04:04,750 sizes for our list items. 83 00:04:04,750 --> 00:04:08,340 Each list item now has a width of 250 pixels, 84 00:04:08,340 --> 00:04:11,380 but as our flex container is built dynamically, 85 00:04:11,380 --> 00:04:13,070 meaning with a percentage value, 86 00:04:13,070 --> 00:04:16,550 the unused space will increase if we increase the width 87 00:04:16,550 --> 00:04:19,110 and decrease if we decrease the width. 88 00:04:19,110 --> 00:04:22,810 Therefore a percentage value would again be the way to go. 89 00:04:22,810 --> 00:04:26,950 And again, a value of 100% is the solution here, 90 00:04:26,950 --> 00:04:29,450 because this tells our Flexbox. 91 00:04:29,450 --> 00:04:31,720 If you're working in a Flexbox context here, 92 00:04:31,720 --> 00:04:35,400 that it should use the enter a space available for each flex 93 00:04:35,400 --> 00:04:40,050 item well as each flex item has a width of one third 94 00:04:40,050 --> 00:04:42,730 of the enter container width available by default. 95 00:04:42,730 --> 00:04:45,560 Well, this would fix this issue quickly. 96 00:04:45,560 --> 00:04:47,270 If we do that and change the pixel 97 00:04:47,270 --> 00:04:49,300 value to percentage value, 98 00:04:49,300 --> 00:04:51,530 you see that this problem is solved. 99 00:04:51,530 --> 00:04:55,800 Now each list item occupies the same space 100 00:04:55,800 --> 00:04:59,550 and it also then dynamically increases and decreases, 101 00:04:59,550 --> 00:05:03,480 if we increase or decrease the width of our page. 102 00:05:03,480 --> 00:05:05,840 Now we are not talking about responsive design 103 00:05:05,840 --> 00:05:07,370 at this stage of the course, 104 00:05:07,370 --> 00:05:08,450 but typically, 105 00:05:08,450 --> 00:05:12,140 while this behavior we have right here is maybe nice 106 00:05:12,140 --> 00:05:15,400 from a width perspective for the list items, 107 00:05:15,400 --> 00:05:18,640 but I don't think the images look pretty good here. 108 00:05:18,640 --> 00:05:19,473 Therefore, 109 00:05:19,473 --> 00:05:22,050 we have to dive a bit deeper into images 110 00:05:22,050 --> 00:05:23,693 to make this look better.