1 00:00:00,480 --> 00:00:01,300 Welcome back. 2 00:00:01,390 --> 00:00:08,910 So we're now at the last lesson or the last installment of media queries with says, and we're only 3 00:00:08,910 --> 00:00:12,120 left with one section to do and that is. 4 00:00:13,290 --> 00:00:17,200 The membership plans, OK, and we've got a lot of work to do in this. 5 00:00:17,220 --> 00:00:20,190 That's why I had to have a separate lesson for this. 6 00:00:20,610 --> 00:00:24,420 But before I come to this, I just noticed one mistake that I made here. 7 00:00:24,810 --> 00:00:29,670 I was formatting this while my screen was this wide, right. 8 00:00:29,670 --> 00:00:35,430 So I couldn't understand that when I expanded it, I found out that there's a lot of space on the right 9 00:00:35,430 --> 00:00:37,380 side and there's no space on the left. 10 00:00:37,380 --> 00:00:39,510 So I need to fix that first. 11 00:00:40,320 --> 00:00:43,020 So this was in the amenity box class. 12 00:00:43,770 --> 00:00:50,910 And over here, the mistake I made was I wrote margin one point five from all over, but I don't want 13 00:00:50,910 --> 00:00:51,270 that. 14 00:00:51,270 --> 00:00:57,030 I want a margin or two for the left and right and one point five ram for top and bottom. 15 00:00:57,900 --> 00:01:00,600 So that was the mistake that I made. 16 00:01:03,110 --> 00:01:04,580 And now it's perfect. 17 00:01:06,900 --> 00:01:11,220 If you want, you can even reduce the amount of what do you say, the overlay? 18 00:01:11,400 --> 00:01:16,440 You can make a little less, but I think this one is good enough because my writing is more visible 19 00:01:16,440 --> 00:01:16,850 this way. 20 00:01:18,140 --> 00:01:24,720 All right, so this part is done and now let's move on to what we had started, and it is this part, 21 00:01:24,740 --> 00:01:25,500 the membership plans. 22 00:01:25,790 --> 00:01:32,200 So as I told you before, hovering doesn't really serve much of a purpose in handheld devices. 23 00:01:32,540 --> 00:01:36,890 So that's why it's better if you remove any hover effects from your pages. 24 00:01:36,900 --> 00:01:37,280 Right. 25 00:01:38,190 --> 00:01:40,310 Other than maybe buttons and stuff. 26 00:01:41,000 --> 00:01:44,710 So how will I remove this hover effect and how will it change this? 27 00:01:44,750 --> 00:01:50,300 Because I want to show all this also, like all the amenities that you're going to be getting as a platinum 28 00:01:50,300 --> 00:01:50,710 member. 29 00:01:51,020 --> 00:01:55,550 And at the same time, I also want to show the prices and I want to use this button as well. 30 00:01:56,120 --> 00:01:59,180 So how will I make sure that the person can see this without hovering? 31 00:02:00,200 --> 00:02:03,040 What I can do is I can keep everything in the front. 32 00:02:03,050 --> 00:02:08,540 So even what is in the back, I want you in the front side, maybe at the bottom of this card. 33 00:02:08,840 --> 00:02:11,990 OK, so that's why there are some changes that I need to make. 34 00:02:12,200 --> 00:02:20,720 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 35 00:02:20,720 --> 00:02:26,150 make is I don't want a fixed height right now before I needed a fixed height because I wanted the same 36 00:02:26,150 --> 00:02:27,320 height for the front and back. 37 00:02:27,770 --> 00:02:29,960 But now that doesn't matter anymore. 38 00:02:30,500 --> 00:02:36,560 And I want the card to accommodate whatever height is required as and when the content keeps getting 39 00:02:36,560 --> 00:02:36,920 added. 40 00:02:37,670 --> 00:02:44,810 So over here, what I'm going to do is I'm going to first create I'm going to include the respond mixin 41 00:02:46,130 --> 00:02:50,450 for portrait tablets, I think was d'abord. 42 00:02:52,390 --> 00:02:55,090 Yeah, to support 43 00:02:57,490 --> 00:03:04,960 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 44 00:03:04,960 --> 00:03:09,480 as required even for the side over here. 45 00:03:09,490 --> 00:03:11,720 I have a fixed height over here as well. 46 00:03:12,340 --> 00:03:14,290 Yeah, I have a height of one hundred percent. 47 00:03:14,290 --> 00:03:16,420 So well here also, I don't want it to be fixed. 48 00:03:16,420 --> 00:03:17,460 I want it to be auto. 49 00:03:18,130 --> 00:03:19,450 So let me add it here. 50 00:03:26,370 --> 00:03:31,440 I also want to add a few more things I don't want an absolute position now, I want a relative position 51 00:03:31,830 --> 00:03:34,440 because I don't want to have a back in front. 52 00:03:34,450 --> 00:03:39,810 I just want to have continuous, regular, normal flow of content, one below the other. 53 00:03:40,350 --> 00:03:42,360 OK, so I'll give it a position of relative. 54 00:03:42,850 --> 00:03:47,750 And as you can see, there will be a box shadow below. 55 00:03:47,760 --> 00:03:48,150 Right. 56 00:03:49,660 --> 00:03:53,840 Oh, my plans cannot be seen because it's not complete anyway. 57 00:03:54,130 --> 00:03:59,360 I'll fix that later then and now the important bit when I hover. 58 00:03:59,800 --> 00:04:01,890 I don't want it to rotate. 59 00:04:01,900 --> 00:04:05,620 I don't want the front side to rotate front or back side. 60 00:04:05,620 --> 00:04:09,760 OK, so I'm going to stay here when Howard. 61 00:04:11,310 --> 00:04:13,890 The front side should not rotate. 62 00:04:15,500 --> 00:04:19,430 And so I say transform, rotate, why zero? 63 00:04:20,760 --> 00:04:26,160 That means I wanted to rotate by zero degrees, I don't want to do it, and the backside already it's 64 00:04:26,160 --> 00:04:29,170 written is rated Y zero, so I don't need to make any changes here. 65 00:04:29,550 --> 00:04:32,910 And besides that, I want to make changes to this. 66 00:04:33,090 --> 00:04:38,730 But in part over here, OK, this button part is the whole of the the back part. 67 00:04:38,880 --> 00:04:39,330 All right. 68 00:04:39,510 --> 00:04:44,940 So now, as you can see, hovering over these cards and they're not rotating because I remove the rotate 69 00:04:44,940 --> 00:04:49,220 function, but I still want to see the the back part, whatever is in the back. 70 00:04:49,230 --> 00:04:50,730 But I wanted to come at the bottom over here. 71 00:04:50,910 --> 00:04:52,630 OK, so you can see the shadow over here. 72 00:04:52,800 --> 00:04:56,040 I don't want that to remove it from the front side. 73 00:04:57,690 --> 00:04:59,100 OK, so where is the side? 74 00:05:00,290 --> 00:05:11,930 Here, OK, so I want to remove the box shadow, so I say box none, and I also don't want a broader 75 00:05:11,930 --> 00:05:12,530 radius, not 76 00:05:15,440 --> 00:05:19,050 because I because it's going to look like a cut over here. 77 00:05:19,050 --> 00:05:19,270 Right. 78 00:05:19,280 --> 00:05:21,610 So I don't want that to remove the water radius here. 79 00:05:22,220 --> 00:05:25,760 So that's a border radius will all be zero. 80 00:05:28,710 --> 00:05:32,440 No rounded edges, in other words, I can just what really is zero? 81 00:05:32,460 --> 00:05:33,120 That'll work, too. 82 00:05:33,570 --> 00:05:35,880 Similarly for the French side. 83 00:05:35,940 --> 00:05:37,110 Also, I want the same thing. 84 00:05:38,750 --> 00:05:40,160 What radio should be zero? 85 00:05:47,070 --> 00:05:50,540 OK, so for the back, it's written here, transform roaded, why 180? 86 00:05:50,580 --> 00:05:54,900 I don't want this, so let me remove that from here. 87 00:05:55,500 --> 00:05:56,370 I'll see. 88 00:05:56,760 --> 00:05:58,500 Transform, rotate. 89 00:05:59,560 --> 00:06:00,640 How much zero? 90 00:06:02,210 --> 00:06:05,300 And again, the same border radius, I don't want the border radius. 91 00:06:07,320 --> 00:06:08,230 Or maybe I do. 92 00:06:08,260 --> 00:06:09,740 OK, let me fix that later. 93 00:06:10,230 --> 00:06:12,650 So right now, let's take a look at how it looks right now. 94 00:06:14,810 --> 00:06:18,530 We still cannot see the the back part. 95 00:06:20,510 --> 00:06:25,400 And the reason for that is we haven't made any changes to this part yet. 96 00:06:26,240 --> 00:06:29,960 OK, so this is still position absolute and also we want to change all this. 97 00:06:33,020 --> 00:06:34,940 So we'll make it position relative first. 98 00:06:41,250 --> 00:06:44,220 And we'll see over here stop 50 percent, right? 99 00:06:44,250 --> 00:06:47,250 We don't want that, we want the top to be zero because it's relative. 100 00:06:47,250 --> 00:06:54,210 So we just want it to be just naturally let it flow from one element to the next. 101 00:06:54,280 --> 00:06:56,640 OK, I don't want it to be an absolute position. 102 00:06:56,640 --> 00:06:57,840 I don't want to fix any position. 103 00:06:58,290 --> 00:07:00,880 And as you can see here, I've included center objects. 104 00:07:00,880 --> 00:07:03,510 So what all were part of the center object, do you remember? 105 00:07:04,880 --> 00:07:06,800 Oh, let's look at our. 106 00:07:07,880 --> 00:07:08,570 Mixin. 107 00:07:09,610 --> 00:07:15,970 And in our make sense, where is the center object here, a central object has left 50 percent translate 108 00:07:15,970 --> 00:07:18,000 50 50 and text a line center. 109 00:07:18,010 --> 00:07:21,160 So I don't want this I don't want it to translate 50 50. 110 00:07:21,430 --> 00:07:23,740 And I don't want it to be having a left of 50 percent. 111 00:07:23,740 --> 00:07:24,970 I want the left of zero. 112 00:07:24,970 --> 00:07:25,280 Right. 113 00:07:26,140 --> 00:07:29,050 So let me make all those adjustments. 114 00:07:29,530 --> 00:07:31,270 So text transform also. 115 00:07:33,700 --> 00:07:36,490 I don't want to transform, so what is it? 116 00:07:37,580 --> 00:07:40,610 So let me just say this, I don't want to translate. 117 00:07:43,410 --> 00:07:49,170 And let me put it here, and I don't want any translation, so I'll just put zero here and I wanted 118 00:07:49,170 --> 00:07:54,390 to wait to be one hundred percent of the way that it gets. 119 00:07:55,050 --> 00:07:56,790 And let me see. 120 00:07:56,800 --> 00:07:57,000 No. 121 00:07:59,680 --> 00:08:03,400 So as you can see, the back part has now come to the front. 122 00:08:03,940 --> 00:08:07,960 I still need to make a lot of improvements, like, for example, after we move this thing over here, 123 00:08:08,560 --> 00:08:09,030 OK? 124 00:08:10,180 --> 00:08:11,170 And. 125 00:08:14,400 --> 00:08:19,770 After I had a little bit of padding so that this comes down, so let me fix that, let me give it a 126 00:08:19,770 --> 00:08:22,440 padding of forum. 127 00:08:26,530 --> 00:08:31,820 And it's gone down now, and I don't want this to be so much down, I wanted to move up a little. 128 00:08:31,930 --> 00:08:33,940 Okay, so let me fix that. 129 00:08:34,750 --> 00:08:36,150 That is the cost box, right? 130 00:08:38,530 --> 00:08:40,360 So let me fix the cost, MOCs. 131 00:08:43,380 --> 00:08:45,210 I don't want so much margin bottom. 132 00:08:50,800 --> 00:08:54,970 I just want about three times. 133 00:08:58,330 --> 00:08:59,530 So that'll narrow down. 134 00:09:05,420 --> 00:09:11,090 OK, and I want this thing to have this the top order here, I wanted to have the same shape as this 135 00:09:11,090 --> 00:09:14,140 one so that it looks nicely, you know, like it's flowing. 136 00:09:14,540 --> 00:09:16,690 So for that, you remember what we have to do. 137 00:09:16,700 --> 00:09:18,500 We have to use ClearPath, right. 138 00:09:19,040 --> 00:09:21,320 So let's add it to our back. 139 00:09:28,450 --> 00:09:29,440 So we're going to put it here. 140 00:09:31,250 --> 00:09:33,600 OK, so we'll see clip. 141 00:09:36,940 --> 00:09:40,180 But again, what all was there? 142 00:09:40,810 --> 00:09:45,730 Will, I will use the same ones that we used before for the Frontside right there was it? 143 00:09:50,850 --> 00:09:51,510 You are just one. 144 00:09:53,250 --> 00:09:54,570 So is going to be the same. 145 00:10:01,340 --> 00:10:06,060 And don't forget to write Webjet so that it's compatible with other browsers as well. 146 00:10:08,520 --> 00:10:12,210 So I don't want these border to remove the border border areas first. 147 00:10:21,500 --> 00:10:23,990 Looks like there's an error, OK, in. 148 00:10:25,350 --> 00:10:28,140 File Planalytics, first line 52. 149 00:10:30,560 --> 00:10:32,240 Oh, and put semicolon. 150 00:10:40,850 --> 00:10:42,740 Yeah, so now this looks better. 151 00:10:43,710 --> 00:10:48,140 And I don't want these rounded things at the bottom, so let me just remove all the borders. 152 00:10:48,200 --> 00:10:50,000 OK, let me just put zero border radius. 153 00:10:51,060 --> 00:10:52,500 It should look nice and neat. 154 00:10:54,430 --> 00:10:59,980 And actually, the mistake I made, the slanting thing was supposed to be up, so that is the mistake 155 00:10:59,980 --> 00:11:00,340 I made. 156 00:11:00,370 --> 00:11:02,980 So it's not supposed to be zero zero 100 percent? 157 00:11:03,020 --> 00:11:03,880 No, this is not correct. 158 00:11:04,660 --> 00:11:08,140 It should be zero 15 percent. 159 00:11:10,220 --> 00:11:17,690 And then one hundred zero hundred hundred point zero hundred, this is fine, same for this zero 15 160 00:11:17,690 --> 00:11:20,600 percent and blah, blah. 161 00:11:34,860 --> 00:11:35,580 What happened here? 162 00:11:36,820 --> 00:11:38,050 Big mistake, I'm sure. 163 00:11:38,900 --> 00:11:41,820 Oh, this should be one hundred percent, one hundred percent. 164 00:11:42,350 --> 00:11:42,770 Zero. 165 00:11:42,770 --> 00:11:43,080 One hundred. 166 00:11:43,160 --> 00:11:44,780 OK, let me just copy this now. 167 00:11:49,710 --> 00:11:51,800 OK, fingers crossed, this should work. 168 00:12:03,600 --> 00:12:04,780 And much better. 169 00:12:05,370 --> 00:12:06,240 There are two things left. 170 00:12:06,270 --> 00:12:08,660 First of all, we need to put gaps between these cards. 171 00:12:09,060 --> 00:12:14,410 And second thing is, can you know just a little bit of Grecia that can be seen in the background here? 172 00:12:15,210 --> 00:12:16,380 We don't want that to happen. 173 00:12:16,380 --> 00:12:16,520 Right. 174 00:12:16,550 --> 00:12:18,630 We don't want it to look like a separate entity. 175 00:12:18,960 --> 00:12:23,670 Wanted to look like as if this whole thing from here till here is one hole card. 176 00:12:24,190 --> 00:12:28,500 So that's why what we should do is we need to make this background white and color. 177 00:12:29,480 --> 00:12:31,130 So that it looks seamless. 178 00:12:32,980 --> 00:12:39,160 For that, we can go here and change the background color to white. 179 00:12:40,660 --> 00:12:41,890 The whole plan. 180 00:12:48,280 --> 00:12:52,870 And let me give it margin bottom of. 181 00:12:54,850 --> 00:12:55,990 One point, five rhim. 182 00:13:07,550 --> 00:13:08,210 That's it. 183 00:13:09,140 --> 00:13:11,080 And this looks perfect to me. 184 00:13:13,170 --> 00:13:14,920 Let me try reducing the size. 185 00:13:14,940 --> 00:13:18,710 It still looks good, in fact, it looks just perfect. 186 00:13:20,620 --> 00:13:24,710 One last thing left to do is to reduce these white spaces over here. 187 00:13:24,730 --> 00:13:28,240 We don't need so much white space when your screen is smaller, right. 188 00:13:28,570 --> 00:13:30,570 So let me do that. 189 00:13:30,580 --> 00:13:32,890 And that from where can I do that? 190 00:13:32,890 --> 00:13:35,200 I can do that from the pages. 191 00:13:37,090 --> 00:13:38,470 Let me go to pages. 192 00:13:40,490 --> 00:13:44,150 Home and from here, I can make all these adjustments. 193 00:13:45,570 --> 00:13:47,730 So over here, we have padding of seven ram zero. 194 00:13:47,760 --> 00:13:51,550 We don't want that, we want the padding of just around three remine zero. 195 00:13:51,570 --> 00:13:57,630 OK, so include respond to port. 196 00:14:01,090 --> 00:14:07,390 And over here, we'll give a parting of three ram and zero to them should be enough. 197 00:14:08,020 --> 00:14:10,540 Similarly for the membership section, we can do the same. 198 00:14:14,390 --> 00:14:15,380 And same for the. 199 00:14:16,790 --> 00:14:17,750 Contact section. 200 00:14:24,070 --> 00:14:26,680 Since his reimporting dopier adulterate batting top. 201 00:14:36,210 --> 00:14:37,490 So it's fine now. 202 00:14:43,660 --> 00:14:49,990 We still need to add a little bit of padding over here, so let me see how the about section we hadn't 203 00:14:49,990 --> 00:14:51,210 added any particular. 204 00:14:51,220 --> 00:14:54,840 Just add some padding of three rams over here. 205 00:14:56,950 --> 00:14:58,630 Maybe I can add a margin top. 206 00:15:10,420 --> 00:15:12,250 Yeah, now it's much better. 207 00:15:13,500 --> 00:15:16,050 And you can also go ahead and reduce this. 208 00:15:17,280 --> 00:15:19,680 This what do you think, this space over here? 209 00:15:19,710 --> 00:15:21,090 We don't need so much space here. 210 00:15:21,990 --> 00:15:25,920 And you'll also find some more things which probably might be looking better. 211 00:15:26,830 --> 00:15:30,410 OK, see, like, for example, there's a problem over here, let me just fix this. 212 00:15:30,970 --> 00:15:33,290 The contact pages overlay, OK? 213 00:15:35,390 --> 00:15:37,670 So let me go to Contently success. 214 00:15:37,700 --> 00:15:38,750 What's the problem here? 215 00:15:40,490 --> 00:15:43,970 Let me see the ground size cover. 216 00:15:49,660 --> 00:15:50,920 And I think that looks better. 217 00:15:51,410 --> 00:15:51,780 OK. 218 00:15:53,700 --> 00:15:59,460 So we are basically done with our pitch, and as I was saying, you might find some more things that 219 00:15:59,460 --> 00:16:02,220 you need, some more improvements that you need to make. 220 00:16:02,640 --> 00:16:06,540 So if you find anything, I would encourage you to go ahead and make the changes yourself. 221 00:16:06,870 --> 00:16:13,050 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. 222 00:16:13,500 --> 00:16:21,030 So I encourage you to find more places where you can improve this, your website and go ahead and make 223 00:16:21,030 --> 00:16:21,780 those changes. 224 00:16:22,380 --> 00:16:30,240 And so that is it for this lesson and that's it for this whole series on advance responsive design. 225 00:16:30,240 --> 00:16:31,860 Using SAS makes sense. 226 00:16:32,490 --> 00:16:33,630 In the next lesson. 227 00:16:33,870 --> 00:16:38,340 I'm going to be showing you how to make your images more responsive. 228 00:16:38,970 --> 00:16:41,210 So I'll see you around in the next lesson.