Welcome back.
So we're now at the last lesson or the last installment of media queries with says, and we're only
left with one section to do and that is.
The membership plans, OK, and we've got a lot of work to do in this.
That's why I had to have a separate lesson for this.
But before I come to this, I just noticed one mistake that I made here.
I was formatting this while my screen was this wide, right.
So I couldn't understand that when I expanded it, I found out that there's a lot of space on the right
side and there's no space on the left.
So I need to fix that first.
So this was in the amenity box class.
And over here, the mistake I made was I wrote margin one point five from all over, but I don't want
that.
I want a margin or two for the left and right and one point five ram for top and bottom.
So that was the mistake that I made.
And now it's perfect.
If you want, you can even reduce the amount of what do you say, the overlay?
You can make a little less, but I think this one is good enough because my writing is more visible
this way.
All right, so this part is done and now let's move on to what we had started, and it is this part,
the membership plans.
So as I told you before, hovering doesn't really serve much of a purpose in handheld devices.
So that's why it's better if you remove any hover effects from your pages.
Right.
Other than maybe buttons and stuff.
So how will I remove this hover effect and how will it change this?
Because I want to show all this also, like all the amenities that you're going to be getting as a platinum
member.
And at the same time, I also want to show the prices and I want to use this button as well.
So how will I make sure that the person can see this without hovering?
What I can do is I can keep everything in the front.
So even what is in the back, I want you in the front side, maybe at the bottom of this card.
OK, so that's why there are some changes that I need to make.
So first thing that I need to make is let's go to land on the USS And the first change that I want to
make is I don't want a fixed height right now before I needed a fixed height because I wanted the same
height for the front and back.
But now that doesn't matter anymore.
And I want the card to accommodate whatever height is required as and when the content keeps getting
added.
So over here, what I'm going to do is I'm going to first create I'm going to include the respond mixin
for portrait tablets, I think was d'abord.
Yeah, to support
and here I'm going to say height, I want it to be auto so that it's not fixed, you know, it can expand
as required even for the side over here.
I have a fixed height over here as well.
Yeah, I have a height of one hundred percent.
So well here also, I don't want it to be fixed.
I want it to be auto.
So let me add it here.
I also want to add a few more things I don't want an absolute position now, I want a relative position
because I don't want to have a back in front.
I just want to have continuous, regular, normal flow of content, one below the other.
OK, so I'll give it a position of relative.
And as you can see, there will be a box shadow below.
Right.
Oh, my plans cannot be seen because it's not complete anyway.
I'll fix that later then and now the important bit when I hover.
I don't want it to rotate.
I don't want the front side to rotate front or back side.
OK, so I'm going to stay here when Howard.
The front side should not rotate.
And so I say transform, rotate, why zero?
That means I wanted to rotate by zero degrees, I don't want to do it, and the backside already it's
written is rated Y zero, so I don't need to make any changes here.
And besides that, I want to make changes to this.
But in part over here, OK, this button part is the whole of the the back part.
All right.
So now, as you can see, hovering over these cards and they're not rotating because I remove the rotate
function, but I still want to see the the back part, whatever is in the back.
But I wanted to come at the bottom over here.
OK, so you can see the shadow over here.
I don't want that to remove it from the front side.
OK, so where is the side?
Here, OK, so I want to remove the box shadow, so I say box none, and I also don't want a broader
radius, not
because I because it's going to look like a cut over here.
Right.
So I don't want that to remove the water radius here.
So that's a border radius will all be zero.
No rounded edges, in other words, I can just what really is zero?
That'll work, too.
Similarly for the French side.
Also, I want the same thing.
What radio should be zero?
OK, so for the back, it's written here, transform roaded, why 180?
I don't want this, so let me remove that from here.
I'll see.
Transform, rotate.
How much zero?
And again, the same border radius, I don't want the border radius.
Or maybe I do.
OK, let me fix that later.
So right now, let's take a look at how it looks right now.
We still cannot see the the back part.
And the reason for that is we haven't made any changes to this part yet.
OK, so this is still position absolute and also we want to change all this.
So we'll make it position relative first.
And we'll see over here stop 50 percent, right?
We don't want that, we want the top to be zero because it's relative.
So we just want it to be just naturally let it flow from one element to the next.
OK, I don't want it to be an absolute position.
I don't want to fix any position.
And as you can see here, I've included center objects.
So what all were part of the center object, do you remember?
Oh, let's look at our.
Mixin.
And in our make sense, where is the center object here, a central object has left 50 percent translate
50 50 and text a line center.
So I don't want this I don't want it to translate 50 50.
And I don't want it to be having a left of 50 percent.
I want the left of zero.
Right.
So let me make all those adjustments.
So text transform also.
I don't want to transform, so what is it?
So let me just say this, I don't want to translate.
And let me put it here, and I don't want any translation, so I'll just put zero here and I wanted
to wait to be one hundred percent of the way that it gets.
And let me see.
No.
So as you can see, the back part has now come to the front.
I still need to make a lot of improvements, like, for example, after we move this thing over here,
OK?
And.
After I had a little bit of padding so that this comes down, so let me fix that, let me give it a
padding of forum.
And it's gone down now, and I don't want this to be so much down, I wanted to move up a little.
Okay, so let me fix that.
That is the cost box, right?
So let me fix the cost, MOCs.
I don't want so much margin bottom.
I just want about three times.
So that'll narrow down.
OK, and I want this thing to have this the top order here, I wanted to have the same shape as this
one so that it looks nicely, you know, like it's flowing.
So for that, you remember what we have to do.
We have to use ClearPath, right.
So let's add it to our back.
So we're going to put it here.
OK, so we'll see clip.
But again, what all was there?
Will, I will use the same ones that we used before for the Frontside right there was it?
You are just one.
So is going to be the same.
And don't forget to write Webjet so that it's compatible with other browsers as well.
So I don't want these border to remove the border border areas first.
Looks like there's an error, OK, in.
File Planalytics, first line 52.
Oh, and put semicolon.
Yeah, so now this looks better.
And I don't want these rounded things at the bottom, so let me just remove all the borders.
OK, let me just put zero border radius.
It should look nice and neat.
And actually, the mistake I made, the slanting thing was supposed to be up, so that is the mistake
I made.
So it's not supposed to be zero zero 100 percent?
No, this is not correct.
It should be zero 15 percent.
And then one hundred zero hundred hundred point zero hundred, this is fine, same for this zero 15
percent and blah, blah.
What happened here?
Big mistake, I'm sure.
Oh, this should be one hundred percent, one hundred percent.
Zero.
One hundred.
OK, let me just copy this now.
OK, fingers crossed, this should work.
And much better.
There are two things left.
First of all, we need to put gaps between these cards.
And second thing is, can you know just a little bit of Grecia that can be seen in the background here?
We don't want that to happen.
Right.
We don't want it to look like a separate entity.
Wanted to look like as if this whole thing from here till here is one hole card.
So that's why what we should do is we need to make this background white and color.
So that it looks seamless.
For that, we can go here and change the background color to white.
The whole plan.
And let me give it margin bottom of.
One point, five rhim.
That's it.
And this looks perfect to me.
Let me try reducing the size.
It still looks good, in fact, it looks just perfect.
One last thing left to do is to reduce these white spaces over here.
We don't need so much white space when your screen is smaller, right.
So let me do that.
And that from where can I do that?
I can do that from the pages.
Let me go to pages.
Home and from here, I can make all these adjustments.
So over here, we have padding of seven ram zero.
We don't want that, we want the padding of just around three remine zero.
OK, so include respond to port.
And over here, we'll give a parting of three ram and zero to them should be enough.
Similarly for the membership section, we can do the same.
And same for the.
Contact section.
Since his reimporting dopier adulterate batting top.
So it's fine now.
We still need to add a little bit of padding over here, so let me see how the about section we hadn't
added any particular.
Just add some padding of three rams over here.
Maybe I can add a margin top.
Yeah, now it's much better.
And you can also go ahead and reduce this.
This what do you think, this space over here?
We don't need so much space here.
And you'll also find some more things which probably might be looking better.
OK, see, like, for example, there's a problem over here, let me just fix this.
The contact pages overlay, OK?
So let me go to Contently success.
What's the problem here?
Let me see the ground size cover.
And I think that looks better.
OK.
So we are basically done with our pitch, and as I was saying, you might find some more things that
you need, some more improvements that you need to make.
So if you find anything, I would encourage you to go ahead and make the changes yourself.
If I go to do to make it perfect now is going to take all day and it's going to take up a lot of time.
So I encourage you to find more places where you can improve this, your website and go ahead and make
those changes.
And so that is it for this lesson and that's it for this whole series on advance responsive design.
Using SAS makes sense.
In the next lesson.
I'm going to be showing you how to make your images more responsive.
So I'll see you around in the next lesson.