1 00:00:01,030 --> 00:00:02,860 Hello, everyone, and welcome back. 2 00:00:03,900 --> 00:00:08,670 In today's video, we will learn how to use dynamic wood for responsive design. 3 00:00:09,600 --> 00:00:12,150 Let's say we have this image right now. 4 00:00:12,210 --> 00:00:14,460 It has a width of 800 pixels. 5 00:00:15,150 --> 00:00:16,650 So this is a fixed value. 6 00:00:17,100 --> 00:00:20,280 So even when my screen is smaller than 800 pixels. 7 00:00:20,640 --> 00:00:25,470 So I've noticed 414, this image stays of the same size. 8 00:00:25,560 --> 00:00:26,670 And it overflows. 9 00:00:27,030 --> 00:00:33,300 So as you can see here, this image on the content is overflowing because even the content has the width 10 00:00:33,300 --> 00:00:34,500 of 800 pixels. 11 00:00:35,280 --> 00:00:37,020 This is not responsive behavior. 12 00:00:37,530 --> 00:00:41,310 Instead, the image should stay at 800 pixels for the laptop screen. 13 00:00:42,170 --> 00:00:48,030 And when the screen cannot fit 800 pixel white image, then it should change the width based on the 14 00:00:48,030 --> 00:00:48,730 screen with. 15 00:00:49,320 --> 00:00:51,660 That sounds cool, but how do we do that? 16 00:00:52,380 --> 00:00:55,860 Well, we can change the unit from pixels to percentage. 17 00:00:56,340 --> 00:00:57,180 Let's give it a try. 18 00:00:57,570 --> 00:00:58,800 So coming back here. 19 00:00:59,930 --> 00:01:01,250 Let's bring about to do. 20 00:01:02,520 --> 00:01:07,100 All right, so this is where we've defined with 800 pixels. 21 00:01:07,830 --> 00:01:10,540 So let's see, just two percent each. 22 00:01:11,070 --> 00:01:12,750 Let's say hundred percent. 23 00:01:13,380 --> 00:01:14,170 Let's save it. 24 00:01:15,330 --> 00:01:18,350 And as you can see, it's sticking the entire with the screen. 25 00:01:19,130 --> 00:01:21,670 And it's definitely more than 800 pixels wide. 26 00:01:22,230 --> 00:01:26,790 So what we need is we need to put an upper limit on the width for this. 27 00:01:26,820 --> 00:01:29,020 We have another property called Knox Wood. 28 00:01:29,820 --> 00:01:30,620 Let's try that. 29 00:01:32,030 --> 00:01:35,780 So let's use a proper demarks word, let's say 800 pixels. 30 00:01:36,230 --> 00:01:39,650 So what we're seeing is a hundred percent of the width available. 31 00:01:40,130 --> 00:01:42,350 But go marks to 800 pixels. 32 00:01:42,680 --> 00:01:43,460 So let's save it. 33 00:01:43,910 --> 00:01:46,550 And as you can see, images back to 800 pixels. 34 00:01:46,580 --> 00:01:49,460 Now, let's see how this affected the mobile screen. 35 00:01:49,750 --> 00:01:56,510 So coming back here and as you can see, the image is smaller, but the text is still big because we 36 00:01:56,510 --> 00:01:58,270 haven't changed the property for text. 37 00:01:58,640 --> 00:01:59,870 So let's try that as well. 38 00:02:01,040 --> 00:02:02,420 So coming back, Hugh. 39 00:02:03,600 --> 00:02:05,310 So this is their description rapper. 40 00:02:05,430 --> 00:02:08,130 And we've given it a fixed would of 800 pixels. 41 00:02:08,910 --> 00:02:09,950 So let's give it a word. 42 00:02:10,290 --> 00:02:11,430 A hundred percent. 43 00:02:11,490 --> 00:02:14,820 And let's give it a max with 800 pixels. 44 00:02:15,270 --> 00:02:15,990 Let's save it. 45 00:02:17,430 --> 00:02:18,480 Now, as you can see. 46 00:02:19,820 --> 00:02:27,080 The image taken the entire width of the phone and even the text is taking the entire world of the phone. 47 00:02:27,110 --> 00:02:28,750 And nothing is overflowing anymore. 48 00:02:29,600 --> 00:02:30,740 Similarly, over here. 49 00:02:31,430 --> 00:02:32,690 Everything is the same. 50 00:02:33,410 --> 00:02:37,900 Now, if you want to see how it changes, so let's bring it here. 51 00:02:39,630 --> 00:02:43,890 So right now, my screen with us, fifteen hundred pixels. 52 00:02:44,730 --> 00:02:47,520 So when I reduce it, I keep reducing it. 53 00:02:48,360 --> 00:02:49,140 Nothing is changing. 54 00:02:49,140 --> 00:02:50,760 The image size is not changing. 55 00:02:51,150 --> 00:02:52,500 Even the text is not changing. 56 00:02:52,530 --> 00:02:57,420 Everything is in place because still others more than 800 pixels. 57 00:02:58,520 --> 00:03:01,160 And now, as you can see with is less than 800 pixels. 58 00:03:01,390 --> 00:03:06,080 And when the value decreases the image as well as the text, they keep reducing. 59 00:03:10,320 --> 00:03:19,140 Right now, the weather is 236 pixels on the images just grown smaller and same goes for the text as 60 00:03:19,140 --> 00:03:19,470 well. 61 00:03:21,250 --> 00:03:28,060 So if you want to put a gap on the minimum with so you can do that as well, let's say everyone, the 62 00:03:28,060 --> 00:03:31,360 minimum wage to be saved, 400 pixels. 63 00:03:34,010 --> 00:03:36,240 Similarly, let's put it here as well. 64 00:03:37,290 --> 00:03:38,570 I know enough to reduce it. 65 00:03:40,330 --> 00:03:43,140 The size decreases, but after a certain point. 66 00:03:44,350 --> 00:03:45,310 It overflows. 67 00:03:45,730 --> 00:03:46,690 That's one side effect. 68 00:03:46,720 --> 00:03:49,930 But there are cases when you will have to use minimum with as well. 69 00:03:50,500 --> 00:03:53,860 So this is all possible because of the percentage unit it that we used. 70 00:03:55,060 --> 00:03:59,930 In this scenario, we had an image you might want a similar effect for any other HDMI element. 71 00:04:00,400 --> 00:04:06,820 In that case, just used it was indigent and always remember, if there's a chance that you estimate 72 00:04:06,850 --> 00:04:09,550 element might overflow because of a fixed value. 73 00:04:10,700 --> 00:04:16,630 Change it to pose an age and use Mocksville property to set the upper limit on with or use them in with 74 00:04:16,630 --> 00:04:18,900 property to set a lower limit on what? 75 00:04:19,030 --> 00:04:20,740 Based on your requirement? 76 00:04:21,840 --> 00:04:22,880 That's all for today, guys. 77 00:04:23,100 --> 00:04:25,230 If there is something that you did not understand. 78 00:04:25,740 --> 00:04:28,050 Feel free to drop a comment and we will discuss it. 79 00:04:28,830 --> 00:04:29,850 See you in the next video. 80 00:04:29,930 --> 00:04:30,240 Bye. 81 00:04:30,320 --> 00:04:31,150 And take care.