Hello, everyone, and welcome back.
In today's video, we will learn how to use dynamic wood for responsive design.
Let's say we have this image right now.
It has a width of 800 pixels.
So this is a fixed value.
So even when my screen is smaller than 800 pixels.
So I've noticed 414, this image stays of the same size.
And it overflows.
So as you can see here, this image on the content is overflowing because even the content has the width
of 800 pixels.
This is not responsive behavior.
Instead, the image should stay at 800 pixels for the laptop screen.
And when the screen cannot fit 800 pixel white image, then it should change the width based on the
screen with.
That sounds cool, but how do we do that?
Well, we can change the unit from pixels to percentage.
Let's give it a try.
So coming back here.
Let's bring about to do.
All right, so this is where we've defined with 800 pixels.
So let's see, just two percent each.
Let's say hundred percent.
Let's save it.
And as you can see, it's sticking the entire with the screen.
And it's definitely more than 800 pixels wide.
So what we need is we need to put an upper limit on the width for this.
We have another property called Knox Wood.
Let's try that.
So let's use a proper demarks word, let's say 800 pixels.
So what we're seeing is a hundred percent of the width available.
But go marks to 800 pixels.
So let's save it.
And as you can see, images back to 800 pixels.
Now, let's see how this affected the mobile screen.
So coming back here and as you can see, the image is smaller, but the text is still big because we
haven't changed the property for text.
So let's try that as well.
So coming back, Hugh.
So this is their description rapper.
And we've given it a fixed would of 800 pixels.
So let's give it a word.
A hundred percent.
And let's give it a max with 800 pixels.
Let's save it.
Now, as you can see.
The image taken the entire width of the phone and even the text is taking the entire world of the phone.
And nothing is overflowing anymore.
Similarly, over here.
Everything is the same.
Now, if you want to see how it changes, so let's bring it here.
So right now, my screen with us, fifteen hundred pixels.
So when I reduce it, I keep reducing it.
Nothing is changing.
The image size is not changing.
Even the text is not changing.
Everything is in place because still others more than 800 pixels.
And now, as you can see with is less than 800 pixels.
And when the value decreases the image as well as the text, they keep reducing.
Right now, the weather is 236 pixels on the images just grown smaller and same goes for the text as
well.
So if you want to put a gap on the minimum with so you can do that as well, let's say everyone, the
minimum wage to be saved, 400 pixels.
Similarly, let's put it here as well.
I know enough to reduce it.
The size decreases, but after a certain point.
It overflows.
That's one side effect.
But there are cases when you will have to use minimum with as well.
So this is all possible because of the percentage unit it that we used.
In this scenario, we had an image you might want a similar effect for any other HDMI element.
In that case, just used it was indigent and always remember, if there's a chance that you estimate
element might overflow because of a fixed value.
Change it to pose an age and use Mocksville property to set the upper limit on with or use them in with
property to set a lower limit on what?
Based on your requirement?
That's all for today, guys.
If there is something that you did not understand.
Feel free to drop a comment and we will discuss it.
See you in the next video.
Bye.
And take care.