1 00:00:02,230 --> 00:00:08,860 Until now, the size of our background image right here solely depends on the min width, 2 00:00:08,950 --> 00:00:10,620 so once we are above our minimum 3 00:00:10,640 --> 00:00:13,560 width right here, the height will be increased. 4 00:00:13,600 --> 00:00:17,880 We have a normal height of 33vh for the mobile view 5 00:00:18,100 --> 00:00:22,670 and of 30vh for the desktop view as you could call it. 6 00:00:22,750 --> 00:00:23,680 Now for the the mobile phone, 7 00:00:23,680 --> 00:00:25,050 this is totally fine 8 00:00:25,330 --> 00:00:32,700 but if we say we have an iPad for example right here which means that our view already jumps into the 9 00:00:32,700 --> 00:00:40,630 media query because the width is above our 40rem, let's maybe increase the size a bit, not that much, maybe 10 00:00:40,630 --> 00:00:41,580 like that, 11 00:00:41,660 --> 00:00:49,270 well then the problem could be that if we go to the landscape mode, that the image might be too big because 12 00:00:49,270 --> 00:00:55,560 the width now is still above our limit for the media query but it could be that the height is not enough 13 00:00:55,570 --> 00:00:59,890 now because width and height simply changed due to landscape and portrait. 14 00:00:59,920 --> 00:01:06,040 Now the great thing would be if we could also consider the height at the same time, so we could say that 15 00:01:06,070 --> 00:01:13,470 we only want to increase our image or apply this media query in case both criteria are met, 16 00:01:13,480 --> 00:01:16,550 so we have enough width and enough height. 17 00:01:16,660 --> 00:01:22,030 Now the cool thing is that we can do this because with media queries, we can of course address the height 18 00:01:22,420 --> 00:01:25,890 but we cannot only address the height and the width separately, 19 00:01:25,990 --> 00:01:32,560 we can actually address both by creating more complex media queries. 20 00:01:32,560 --> 00:01:34,720 Now let's see how this works. 21 00:01:34,750 --> 00:01:44,190 Basically we could simply add and write here and now specify a minimum height for our media query. 22 00:01:44,790 --> 00:01:51,600 This simply would mean that the code for this media query will only be applied if both criteria right 23 00:01:51,600 --> 00:01:52,550 here are met, 24 00:01:52,560 --> 00:02:00,180 so we have a min width of 40rem and let's maybe say a min height of 60rem, so something rather big. 25 00:02:00,510 --> 00:02:08,620 If we do that andre load our iPad right here, then you can see that our image didn't get any bigger 26 00:02:08,800 --> 00:02:12,090 because both criteria were not met, did you see it? 27 00:02:12,130 --> 00:02:18,820 If I turn that back to 40rem for example because then it would be applied, so if I reload, can you see it? 28 00:02:19,030 --> 00:02:22,820 The image then simply uses the code we added right here. 29 00:02:22,840 --> 00:02:23,820 So that's one way 30 00:02:23,860 --> 00:02:30,550 how you could solve something like that, you can use such combinators to basically make sure that both 31 00:02:30,550 --> 00:02:33,370 the min height and the min width are met. 32 00:02:33,460 --> 00:02:41,590 If we then go back to our portrait mode for example, the larger image would be applied because we have 33 00:02:41,590 --> 00:02:48,580 enough space for both the width and the height. Another thing we could do is, we cannot only combine it 34 00:02:48,580 --> 00:02:50,770 like this with another minimum height, 35 00:02:50,770 --> 00:02:54,980 we could also say that the orientation must be a specific one. 36 00:02:55,180 --> 00:03:00,820 So if you write orientation right here and then for example say orientation should be portrayed like 37 00:03:00,820 --> 00:03:01,630 that. 38 00:03:02,050 --> 00:03:07,840 If that's the case and if we reload our device, we can see that the media query is applied right 39 00:03:07,840 --> 00:03:09,940 here because we are in landscape mode 40 00:03:09,940 --> 00:03:17,110 but if I turn the device, you can again see that this is now not our larger image because not both 41 00:03:17,110 --> 00:03:24,190 criteria are met and therefore the normal, the mobile view for our image will be loaded. 42 00:03:24,190 --> 00:03:30,220 I can also show you this for our plans because I think there, it becomes more obvious. If we now simply 43 00:03:30,220 --> 00:03:36,580 another condition right here and this time maybe say orientation should be landscape, so only for 44 00:03:36,670 --> 00:03:40,340 landscape devices our larger view should be applied, 45 00:03:40,720 --> 00:03:47,280 if I now reload the page, you can see that nothing changes but for the mobile view, we're now back in our 46 00:03:47,290 --> 00:03:55,240 mobile design because we now applied two different things. For our image up here, we'd simply said if we 47 00:03:55,240 --> 00:04:01,600 have a minimum width of 40rem and the orientation of portrait which is the case right here, then please 48 00:04:01,600 --> 00:04:05,030 apply that code right there. At the same time, 49 00:04:05,050 --> 00:04:12,670 we said if we have also the min width of 40rem but the orientation should be landscape, then please apply 50 00:04:12,760 --> 00:04:14,410 this code right here 51 00:04:14,650 --> 00:04:20,620 and because of that, we can see that if we are in the portrait mode, the larger image and the app-like elements 52 00:04:20,620 --> 00:04:21,520 are applied 53 00:04:21,520 --> 00:04:26,830 but for the landscape mode, we can see that we have the smaller image and all the information right here 54 00:04:26,920 --> 00:04:27,880 immediately. 55 00:04:27,910 --> 00:04:36,040 So this is how you can specifically target the way your website behaves, not only depending on the width 56 00:04:36,070 --> 00:04:38,960 of your device but also of combinations, 57 00:04:38,980 --> 00:04:46,310 so of two different conditions met at the same time and additional information like how the user uses 58 00:04:46,310 --> 00:04:52,890 its device, so in landscape or portrait mode. In addition to this and combinator, so this one right here, 59 00:04:53,190 --> 00:04:56,310 we also have comma separated lists. 60 00:04:56,310 --> 00:05:06,850 This means if I now simply change the end with a comma like that, then if one of these two conditions 61 00:05:06,940 --> 00:05:09,760 is true, then the code will be applied. 62 00:05:09,760 --> 00:05:16,570 This means we either have a minimum width of 40rem or the landscape orientation to display our website 63 00:05:16,750 --> 00:05:19,030 according to this desktop view. 64 00:05:19,090 --> 00:05:25,120 So if I reload the page now, you can see that in the landscape mode, this desktop side is applied but the 65 00:05:25,120 --> 00:05:31,720 same thing is true for the portrait mode because for the portrait mode, this part, the min width of 40rem 66 00:05:32,590 --> 00:05:34,780 is correct, so we have this minimum width, 67 00:05:34,840 --> 00:05:39,030 therefore we can apply this code and for the landscape orientation, 68 00:05:39,040 --> 00:05:40,970 well actually both are true, 69 00:05:40,990 --> 00:05:46,960 for example even if I would increase the min width to 200rem and then reload the page, it would still apply 70 00:05:46,970 --> 00:05:54,520 the desktop mode because although the min width is not equal to 200rem because it's only 1024 pixels 71 00:05:54,880 --> 00:05:56,480 but the orientation is landscape, 72 00:05:56,620 --> 00:05:59,830 therefore this desktop mode is applied right now. 73 00:05:59,830 --> 00:06:04,990 Now the thing is that we don't need that right here actually, so we can get rid of this part of the 74 00:06:04,990 --> 00:06:05,600 code 75 00:06:05,800 --> 00:06:12,220 but if we go up here to our media query right there for the background image, the orientation portrait 76 00:06:12,520 --> 00:06:14,110 could actually make sense 77 00:06:15,000 --> 00:06:21,690 and I'm saying could because there is a problem with that. If I go back to the website and change right 78 00:06:21,690 --> 00:06:27,520 here to the iPad back, then we can see that the smaller image is applied right here 79 00:06:27,780 --> 00:06:32,270 and as soon as I switch it to portrait mode, the larger image is applied. 80 00:06:32,280 --> 00:06:38,760 The problem is if I go back to my desktop view and now play around with the code, you can see that this 81 00:06:38,760 --> 00:06:39,920 works fine right here, 82 00:06:39,930 --> 00:06:46,890 now we are still in portrait mode, in portrait mode and now it jumps back to the initial size because 83 00:06:47,190 --> 00:06:55,560 now, the width is bigger then the height and therefore, the portrait mode basically is no longer existing. 84 00:06:55,560 --> 00:07:00,740 Therefore using this orientation portrait can be an idea but it's not the best one 85 00:07:00,740 --> 00:07:05,000 if you also want to make sure that your website looks good on a desktop device. 86 00:07:05,040 --> 00:07:11,540 Therefore what we will do right here is we will go back to a minimum height for our media query right 87 00:07:11,550 --> 00:07:17,650 here and let's say the minimum height should be maybe 60rem, something like that. 88 00:07:17,700 --> 00:07:19,600 Let's see if we reload the page 89 00:07:19,600 --> 00:07:24,650 now, we can see that the media query is working fine again, 90 00:07:24,660 --> 00:07:26,690 we have the mobile view which looks good 91 00:07:26,940 --> 00:07:32,090 and then we have the desktop view for the bigger screens, 92 00:07:32,210 --> 00:07:33,970 yes I think this looks nicer. 93 00:07:34,100 --> 00:07:41,150 So keep that in mind, using portrait here can make sense but basically with these logical operators, you 94 00:07:41,150 --> 00:07:48,560 can also combine a width and a height to always make sure that your website looks as good as possible on 95 00:07:48,560 --> 00:07:54,680 different devices and doesn't occupy too much space for images for example, like it would be the case 96 00:07:54,770 --> 00:07:56,350 for us right here. 97 00:07:56,420 --> 00:07:59,930 And with that, we're actually almost done with this module, 98 00:07:59,930 --> 00:08:06,520 the only thing we should do in the next lecture is we should take a look at all the pages on our website 99 00:08:06,520 --> 00:08:11,980 and see if we have to add some more responsive code to it.