Welcome back.
This is the second lesson for our media queries with SAS, and in this lesson we're going to continue
working on our Lakeview project to make it responsive.
So as you saw in the previous lesson, we've set up our Lakeview project already to be responsive.
We're one step ahead because we have created everything with relative units.
We've given percentage values for the font sizes, for the root font sizes, so that everything else
gets automatically resized accordingly.
Because everything else in our website is Ingrams is given in Durham units, whether it's a button or
an image or a simple box or a font, anything or heading everything is given in RAM units, which is
a relative unit, and it is relative to the root font size.
So when the device changes its root font size automatically, all the sizes also get reduced or increased
as required.
So this is one good thing about using relative units or REM's.
But one thing we forgot to do is we forgot to change the units in our mix in the breakpoint units.
We still have it in pixels.
It's better to have it in relative units.
And I'll tell you why.
Now you know that there are some people who have accessibility issues.
So what they usually do is when they use their browser, they said the browser to enlarge all the fonts
and all the text, which is in all the pictures, let's say, which they are going to see in their different
websites.
So when you set the width in pixels or when you said anything at all in pixel values, this is an absolute
value.
And so it does not depend on the size settings for that.
The browser is set and it doesn't take the browser settings into consideration.
So if the person wants something to be enlarged, he will not see it as in light.
You will see it in the same way as we have given it, but we don't want that.
We want our website to adapt to the requirements of our viewers.
So if our viewers need to see something in large, we want to give that benefit to our user.
And for that, what we need to do is we need to give these pixel values actually in relative units,
depending on the root font size provided by the browser.
So the browser wants something to be large.
It'll probably give the root font size instead of 16.
It'll have the root font sizes 18 or 20 depending on the requirement of the user.
So in order to make sure that we take the root font size into consideration, we have to use either
REM's or Ms.
Now, one thing you need to know is media queries.
In general.
They are not affected by the root font size that you specify in your base file.
It's not affected by this.
So you have to set it separately.
And there have been a lot of research done on whether MS or MS are better.
And finally, the verdict that has come out is that it's better to use Ms.
Munitz in your media queries.
And actually, whether you use Raymore M, both of them are going to depend on the root font size,
which has come from the browser, not the root font size which you have specified in your base file.
OK, so we are also going to specify in MS.
Since that is what most of the experts have told.
And so how do we make convert this pixel value to an M value?
Now in general, the font size is, say, 16 pixels.
OK, so one M equals sixteen pixel lawyer.
And so what will six hundred pixels be, how much and will it be five hundred seventy six pixels will
be equal to five hundred seventy six divided by.
16.
That'll give you the value for it, and so let me just calculate and find out how much is going to be
it's going to be thirty six am, OK?
All right, let's look at the next one.
Seven hundred seventy six pixels divided by 16 will be forty eight, so this will be forty eight and
then nine hundred and ninety one pixels will be divided by 16 will be sixty one point nine and.
Finally, twelve hundred pixels will be rendered by sixteen is seventy five, so this will be.
Seventy five and.
Let me change this thirty six am.
All right, so now that we have our set up, good to go, we can now start making proper changes to
individual elements that require changes in our B2K.
And let's see the.
Responsive to.
All right, let's start from twelve hundred.
OK, so now let's start reducing things.
There's a lot of changes that need to be made.
But first and foremost, I don't want this white border when our page becomes smaller, I mean narrower.
So when you have these portrait tablets, when it's a landscape tablet form, it's fine.
But when it's in portrait tablet form, I would like this white part to go and so I can remove it from
the body.
OK, so anybody let me add the response mixin.
So I see.
At include.
Respond and for which devices, only water tablets so become so easy, you don't need to always remember
the width or the different devices, you can just write the name of the device so it becomes so much
easier to code.
And we'll give all padding equal to zero.
OK, next time the portrait was.
We just write this down here, tablet's in portrait mode, OK, so that is easy to remember.
OK, so 768 onwards.
Let me see.
OK, so right now it has the betting and let's go down and it'll go to seven sixty eight and below.
And there you go.
The betting is gone.
You see, there's no more betting.
All right, so that's one thing done and now we're going to go step by step now, how do you know how
to go about making a baby responsive?
You can go one by one.
I mean, the best way I feel is to go section by section.
So start with the header.
I always start with the header and the footer.
And once I'm done with that, then I move section by section.
I go to the first section, then I go to the second section and so on.
OK, this thing is going to take a lot of time.
So I'm going to do this last.
And the rest is going to be fairly easy to see how our work is already done.
Very few things that that need to be changed.
All right.
So let's move on.
Let's do the Whitter first.
And I think everything seems fine for the header so far.
Less reduce it, reduce the width.
And only only when it becomes 640 is four, which once you kind of 40 is around.
Here are four tablets imported, more so as soon as it goes below seven hundred and sixty eight, we
want to give a little more margin for the buttons, right.
So we want to do that, so let's do that now.
Let's go to the buttons file.
Which is inside the components.
OK.
And I just want to change for the brown one over here, inside this include the respond mixin you'd
respond.
And for water tablets again, so usually the issues start when you are near the end, when you go below
the water tablet size for the portrait of Mahmoud.
OK.
And here and this.
OK, over here, then I will need to give a margin.
So let me just give a margin of.
One room, that's enough, actually.
That'll be a little separated then.
And let's see if it makes the change.
Let's go down seven hundred and sixty eight.
And the change didn't get maybe it.
I think the rendering is not complete, that's why.
Still don't see a difference.
Airport, he was called to airport, I think, right?
I gave the wrong name, it's called D'abord.
I that portrait.
OK, and let's see now.
That would get rendered.
And we're done, so you see now there's a good separation between the two and looks much better.
OK, so this looks good.
So I think we're done with our hair.
Everything else seems just fine.
Now we'll move on to the footer.
So the future looks fine as it is, but I think it would have looked better if we have because since
the it is reducing now, we want them to make each of these sections, these columns take up the whole
space here.
So for that.
I think we have to make some changes to the grid, so why don't we do that first?
Let's just make some changes to the grid.
All right.
In fact, that is something we should have done right after the Whitter anyway.
So let's open the grid.
There are a lot of things that we need to make to the grid.
And you'll notice after we've made the change to the grid at once, we've made the grid responsive,
a lot of our effort is going to get reduced.
So let's open the grid and now let's make some changes here and now we're going to be making big changes
to our page, right, because we're going to be changing the basic grid set up of it.
So far, we've been having the columns one row with two columns, three columns for columns or whatever.
And now we want every row to have just one column or we want one column to occupy the whole width of
the screen when it is in tablet portrait mode.
All right.
So first thing we want is for all the columns to take up one hundred percent of the width as soon as
the width is that of a water tablet.
All right.
When it's narrow enough at that time.
All right.
So we say we're here inside the column selector.
OK.
And include respond to support.
I hope I'm right this time.
All right.
Which is one hundred percent.
And we want this to be followed every time the wind reduces to anything less than double portrait.
So we see one hundred percent important.
I know I had said that we should avoid it as much as possible, but in this case it's important to put
it when it's in the grid.
It's important to put important.
All right.
Now, as you can see, it's all been changed.
See, all the columns are taking up.
The full with that, it has got right, except for a few things over here, like, for example, you
have a lot of padding over your margin over here.
We don't want that.
And it's all like, you know, it's move to the left.
We don't want that.
So we have to remove this because the margin.
Right.
Has been given us this horizontal gutter value.
Right.
So we don't want to margin right when you have a screen, which is less than a tablet portrait.
OK, so let us include this.
Another media query here.
And what you will see instead of Margarite or let, you will see margin rate.
Zero.
We don't want a margin rate.
OK, and so.
No, it hasn't worked yet.
Let's deal with that later when we deal with this part, when we deal with weddings and events.
I mean, nobody determines the section amenity section where we will deal with it at that time.
Right.
OK.
One more thing is, I don't want this large margin bottom for every row, OK, so every row should not
have this large white vertical gutter.
We want it to be a little bit smaller.
So if we go to our variables.
You see, the vertical gutter is atrium right now, we want it to be smaller, let's say like five ram
so we can have a new vertical gutter and we call this vertical gutter small and we can define this to
have, let's say, five ram because we want it to be a little bit less than what it was before.
A forearm, I think is better that it be just half the size of it.
So we want that this vertical gutter, if it's a small screen and we want this margin bottom to be smaller.
OK, so we've just changed this.
Vertical gutter smog.
So now that we're done working with the grid, let's move on to the future.
OK, let me disclose this and this and let's move on to the future.
Oh, the future was in the old.
So now we want this whole thing to take up this whole hundred percent area instead of just part, right?
So let's see, these two parts were divided into two divs and I think their names were navigation and
copyright.
OK, so let me make the navigation and copyright both of them.
One hundred percent in width.
All right.
So include respond.
Tabloid portrait.
And we want.
The width of this to be.
And fixed a line, we want it to be centered.
Yeah, that's better.
Similarly, we want to cooperate also to take up one hundred percent of the width.
And we also want them spacing between the two, right?
OK, so let's do that.
That's gonna be the same thing here for the copyright.
And we'll also give a margin drop of around one point for REM's.
At one point five Rehm's.
I can maybe we need a little more space, let's make it a little more space would be good.
Two point five is fine.
We also want a little more padding here.
I mean, a little less padding here, so we will change this.
Let me add this here.
And we'll see padding first, it was three ram and zero, and now we want it to be a little less, would
make it to ram and zero.
And this is perfect.
OK, that looks great.
So we're done with the footwork, we're done with the header and we're done with the grid, and now
we're going to go section by section making whatever changes we need to make.
All right, so.
So we're going to do that in the next listen, I'm going to see you around in that listen, right.
Bye bye.