So now what I'm going to do is that I'm going to work on the design of the navigation bar, but when
the navigation bar is in a small screen here in the small screen, if you click on the navigation bar,
as you can see, the design doesn't look good.
So let's work on this.
So in order to work on this, I'm going to head on over to bootstrap and I'm going to hit the to see
set.
So in is we need to add.
We tried the following cut.
Here.
So since this, this design is only applicable to small screens, we need to add it media.
So I'm going to say here media at media.
Only screen.
And Max, what is?
Maximum with is 990.
So what does this mean?
This means that the design that I'm going to add inside here will only be applied to two screens.
That due to the design window, the screen is 990 X or smaller.
Maximum with the maximum with this nine is 990.
Beyond this, if even the screen is greater than if the screen is is is too big, the design is not
going to take effect.
It's not going to work.
So this is what I mean by by the by using this.
Good.
So here, in case the screen is small, I'm going to say that now, buttons.
Now Barron's which is this.
Which.
There's now a balance.
So these numbers, we need to remove the margin.
So I'm going to say margin.
Then, because we have already given this this balance now.
But as I remember at the top, we have given the numbers 60%.
So we pushed we pushed the margin left 60%.
And we need to remove this by adding.
By changing the margin to be only ten votes.
Now, if I save and refresh.
And click here.
As you can see, the margin will only be ten.
Let's also fix the design here further.
So for for this, I'm going to say here that now buttons u l and then I'm going to change the margin.
The margin is going to be 1rm and the justify content is going to be flex start.
So they are going to be from the left side, from the left and the line items is going to be also flex
are.
Finally we fixed a line.
He's going to be left for the.
For these icons.
What I'm going to do is that I'm going to say that nav buttons and then u l and then dot S.A.S..
Because these two items.
These two items have a class called if s.
So here I'm going to say margin.
Margin and then Twin Peaks Slice speaks in the X and Twin Peaks.
So margin Twin Peaks from the top, margin five from the right, margin ten from the bottom and margin
20 from the left.
And here I said now Barron's ul because the F S-Class is located inside the UL of the navy of the virus
because this class in f f s is inside this u l which is inside the nav buttons.
Let me now click on file and save able.
Elaina refresh.
As you can see, it looks amazing.
Now we have a better space.
And the design for small screens is going to look like this, where there's a space from the left on
the right, everything looks amazing.