1 00:00:00,930 --> 00:00:04,280 High in this video I will make of it. 2 00:00:04,290 --> 00:00:10,170 Perfect color responsive with the old you're already using a booster framework which is it is once you 3 00:00:10,500 --> 00:00:17,370 and you're using the grid system of the supreme system but there are still few things to be a just should 4 00:00:17,370 --> 00:00:18,640 call the response of the old 5 00:00:23,360 --> 00:00:31,920 U.S. 16 million cuties who make some custom creeks for the responsively old media is simply quilters 6 00:00:31,940 --> 00:00:38,940 dead in genes died off and you get paid based on the bit of the device of ending the content that the 7 00:00:38,940 --> 00:00:48,400 Waitzkin be I can be i-Pad can be desktop's system can be any wide screen the root pre-schools of any 8 00:00:48,400 --> 00:00:54,650 group to source code development and you'd have some very good definition for the gudis like it. 9 00:00:54,650 --> 00:01:04,050 This is this theme technique and it uses the media to include a block of CSSA properties only for certain 10 00:01:04,050 --> 00:01:05,150 conditions. 11 00:01:05,610 --> 00:01:13,320 And for example at media on the screen and the maximum bit is 500 bucks. 12 00:01:13,680 --> 00:01:18,130 Then this is just as you stated the rules should apply. 13 00:01:18,510 --> 00:01:21,180 So you add some custom 14 00:01:24,160 --> 00:01:32,080 CIRCE's or mini acutest to the loser project and horded when you do. 15 00:01:32,600 --> 00:01:38,210 And the big Quine's like breakpoints are these are the big points you can see. 16 00:01:38,750 --> 00:01:41,120 So you will be Eddins and break one leg. 17 00:01:41,140 --> 00:01:45,480 These two that project like this is called by the. 18 00:01:45,590 --> 00:01:46,950 And also for the public 19 00:01:51,580 --> 00:01:57,800 so you can look through this Web site called Curies and it has some great examples. 20 00:01:58,240 --> 00:02:01,690 And you're going to get familiar with media Curies. 21 00:02:02,800 --> 00:02:05,980 OK let me show you the issues we have at this point. 22 00:02:05,990 --> 00:02:09,910 For the responsively out you click on this live preview. 23 00:02:09,970 --> 00:02:18,240 You can see this in the back of Sin-Eater and it will open the door so indexed instrumental like it 24 00:02:18,240 --> 00:02:20,080 is on a local host. 25 00:02:20,080 --> 00:02:20,610 You see 26 00:02:23,510 --> 00:02:28,310 OK you can copy this. 27 00:02:29,490 --> 00:02:34,940 This is to assume that you're already using. 28 00:02:35,260 --> 00:02:39,180 What can we show you that you should use of the responsively out. 29 00:02:39,190 --> 00:02:46,630 We can actually have as you mentioned it I'm already using the browser framework which is already taking 30 00:02:46,630 --> 00:02:49,390 the responsibility on the responsively out. 31 00:02:49,450 --> 00:02:56,440 You can see this but there are still few things new musubi added just like you can see on the header. 32 00:02:56,440 --> 00:03:04,600 We need to text align the headings and we also need to center align these buttons and we also need to 33 00:03:04,600 --> 00:03:12,760 hide this big image on the head of a section of the smart devices working. 34 00:03:13,050 --> 00:03:21,370 Before I google I have introduced this online response you need to cool edit this thing to do this goes 35 00:03:21,370 --> 00:03:21,920 away. 36 00:03:22,030 --> 00:03:24,060 This is the on line. 37 00:03:24,210 --> 00:03:30,490 Checking the responsive website recopy this link is here. 38 00:03:33,910 --> 00:03:39,360 It will show you different versions of your project like you can see. 39 00:03:39,460 --> 00:03:41,680 This is the iPhone 5. 40 00:03:41,970 --> 00:03:53,300 Ortrud virgin of frequently pixel on it a few things which are not looking good on the screen size. 41 00:03:53,570 --> 00:04:00,260 Do you see something you could fix it using the custom widget cuties. 42 00:04:02,850 --> 00:04:06,310 So this is the iPhone 5 landscape religion. 43 00:04:07,300 --> 00:04:08,410 It is a very. 44 00:04:11,600 --> 00:04:20,010 So it also has a version called I paid I paid was Nusi on the iPad. 45 00:04:20,650 --> 00:04:22,920 So we're just not looking fine. 46 00:04:22,960 --> 00:04:27,760 So there are still a few things need to be adjusted using the media. 47 00:04:27,760 --> 00:04:28,400 Q Does 48 00:04:31,110 --> 00:04:33,100 selectors doing it for them. 49 00:04:33,130 --> 00:04:46,870 I need to create a new file name of sconces Jezus hit me add this in the index starting steamin climb 50 00:05:07,200 --> 00:05:13,100 Steyne sheet the type of text. 51 00:05:13,410 --> 00:05:20,280 And so when he has this and responsive to its users. 52 00:05:20,730 --> 00:05:27,900 So let's start at the big Quine's like I mentioned you really need some big ones for the iPhone 4 the 53 00:05:28,020 --> 00:05:34,080 iPad and for the desktop and for the wide screens. 54 00:05:34,110 --> 00:05:44,240 Before I end the break once all the media is at some most responsive closest to that images take 55 00:05:47,330 --> 00:06:00,090 Joachim it does add more to this one thing I need to set up for them is called a ball. 56 00:06:00,760 --> 00:06:08,460 I come to notice Ed Stabat is once lost. 57 00:06:08,660 --> 00:06:12,560 Buddhism is just close. 58 00:06:12,590 --> 00:06:16,410 I am Jean Gaisford absconds geek off. 59 00:06:16,460 --> 00:06:18,490 This is called the response of the Hulk. 60 00:06:20,930 --> 00:06:22,080 It copied the school 61 00:06:24,780 --> 00:06:25,060 and 62 00:06:29,010 --> 00:06:30,210 Nucor. 63 00:06:30,260 --> 00:06:36,460 I call this Zydeco. 64 00:06:36,840 --> 00:06:38,890 That does it. 65 00:06:39,270 --> 00:06:41,720 Im Jeem cosponsor 66 00:06:44,550 --> 00:06:52,350 and really look for the third one which is don't look at the school 67 00:06:55,490 --> 00:07:02,120 Ed immediate response you gloss up to and he's doing OK. 68 00:07:02,310 --> 00:07:08,370 So now we have applied some older idiom glosses called the Supreme cream. 69 00:07:09,010 --> 00:07:11,650 No it has more to add some big names. 70 00:07:11,700 --> 00:07:15,990 The response of gace is this. 71 00:07:18,830 --> 00:07:22,850 I didn't start writing a brief point for the smart devices 72 00:07:30,650 --> 00:07:37,370 and it wouldn't be a media on link screen. 73 00:07:38,620 --> 00:07:39,040 And 74 00:07:41,870 --> 00:08:01,770 the maximum that could be Sallon 16 Southam books on the custom Issus at this point go out and say this 75 00:08:03,390 --> 00:08:04,470 and this. 76 00:08:04,580 --> 00:08:08,180 Get a of them small-D us is. 77 00:08:08,220 --> 00:08:09,090 And Debbie it's 78 00:08:14,760 --> 00:08:15,290 called Dead. 79 00:08:15,300 --> 00:08:17,370 It will be Semlin six eat 80 00:08:20,390 --> 00:08:21,550 lettuce and some more 81 00:08:24,140 --> 00:08:28,480 acquaints like medium Nueces 82 00:08:34,230 --> 00:08:48,760 way since like this talk it will be minimum the minimum which would be named. 83 00:08:49,550 --> 00:08:53,700 It is also the equine said he is already using. 84 00:08:53,720 --> 00:09:01,330 These are the big points which the Bush steps are using Joaquin Silversun in one and a big one which 85 00:09:01,340 --> 00:09:16,580 is for large races and widescreens and the minimum be called Dead will be hundred. 86 00:09:18,550 --> 00:09:25,090 So these are the big points as you mentioned before we are already using September and the grid system 87 00:09:25,090 --> 00:09:32,290 of the surface and work is taking that is possible using of the lösen responsively or beer. 88 00:09:32,320 --> 00:09:38,870 But there are still few things we can do to be new to be fixed like I assure you using this response 89 00:09:38,910 --> 00:09:44,880 and Interpol and these will be fixed using custom media cuties. 90 00:09:44,920 --> 00:09:47,300 So these are the Kostin media Curies and Gule. 91 00:09:47,380 --> 00:09:59,520 Ed s.c.s these big Quine's and these assists will be applied at some certain routes like for small devices 92 00:10:00,330 --> 00:10:05,700 this year system and say this will be applied and Photosmart devices including the public spaces inside 93 00:10:06,150 --> 00:10:11,660 these precautions would be applied and for the desktop and the wide screen that she says will be played 94 00:10:12,520 --> 00:10:21,940 when the screen size jeans will start adding custom synapsis discussed media cuties. 95 00:10:22,260 --> 00:10:30,420 So if you look look at this quite near me my Z zooming Nusi 96 00:10:34,310 --> 00:10:36,380 then everybody's not looking fine. 97 00:10:37,510 --> 00:10:38,910 They just fix it. 98 00:10:39,280 --> 00:10:43,180 So you're dealing with the smaller devices 99 00:10:46,840 --> 00:10:51,120 so we need to add this this here's where we should be. 100 00:10:51,220 --> 00:10:53,800 All right smart devices. 101 00:10:54,130 --> 00:11:00,100 And if you look inside this in the headers section 102 00:11:04,860 --> 00:11:19,750 we have a clause in their body forward it and is treated like dogs before and griseus since they just 103 00:11:19,750 --> 00:11:24,910 changed the bed grown color and also the border color coded this never board default 104 00:11:29,170 --> 00:11:30,440 a background color 105 00:11:34,580 --> 00:11:41,030 should become white a smiley race is like on iPhone. 106 00:11:41,180 --> 00:11:43,580 I really play that important. 107 00:11:43,750 --> 00:11:48,930 It really Forsett you did as any other most CSSA played. 108 00:11:49,670 --> 00:11:52,820 So and the border color has become 109 00:11:58,160 --> 00:12:08,110 E6 E6 E-6 didn't seem it and see that isn't working. 110 00:12:14,070 --> 00:12:16,890 How do you see it has become white. 111 00:12:17,070 --> 00:12:21,600 Let me show it to you in the online cool old Frechette 112 00:12:26,430 --> 00:12:36,190 and now you see the never becomes a white so it will become word for all the devices which is in the 113 00:12:36,190 --> 00:12:45,340 city Anj which is in 6N pixel range so now you can see no then everyone becomes white. 114 00:12:45,430 --> 00:12:53,120 Here's some more she assists you don't use this iPhone in the header. 115 00:12:53,280 --> 00:12:58,440 If this web page is seen on the smart devices because you're just looking to get your gear there it 116 00:12:58,720 --> 00:13:14,400 is an invisible and you also need not to be miserable on the ALSO tablet on the iPad so you included 117 00:13:14,460 --> 00:13:22,950 in this equation so it will include the small devices and also the tablet and quarter deck. 118 00:13:22,970 --> 00:13:27,410 I think we need to check the class. 119 00:13:27,430 --> 00:13:27,990 OK. 120 00:13:28,040 --> 00:13:29,900 It is an iPhone. 121 00:13:30,020 --> 00:13:36,120 We need to make it invisible on small devices and also on the tablets. 122 00:13:36,710 --> 00:13:41,730 So I will copy and paste it here. 123 00:13:41,770 --> 00:13:50,000 The reason I'm editing the heather dash iPhone inside this bitcoin because we needed on the board on 124 00:13:50,000 --> 00:14:00,930 small devices and also on the tablets are keen to display them and it will become invisible. 125 00:14:02,120 --> 00:14:03,100 Let me refresh it. 126 00:14:09,280 --> 00:14:13,680 Willkie Nalgene is no iPhone on the smart devices. 127 00:14:13,720 --> 00:14:17,580 You can see there is no iPhone on the smart choices. 128 00:14:19,570 --> 00:14:26,410 Including the 7:6 it get off the porter view. 129 00:14:26,510 --> 00:14:29,090 I paid OK. 130 00:14:29,160 --> 00:14:30,420 No there is no iPhone. 131 00:14:30,420 --> 00:14:34,140 We have make it invisible. 132 00:14:34,220 --> 00:14:36,250 Let's fix this. 133 00:14:36,250 --> 00:14:42,430 We need to fix the heading and also the stakes in the middle. 134 00:14:42,700 --> 00:14:46,140 And also I think the burdens need to be fixed in the middle. 135 00:14:46,600 --> 00:14:55,120 So he needed to be fixed on board on 768 and also should be on small devices like it is not looking 136 00:14:55,120 --> 00:14:56,350 good on here. 137 00:14:56,800 --> 00:15:03,540 So they can check the Klaas's plus his core data is the header. 138 00:15:03,580 --> 00:15:04,000 Thanks 139 00:15:10,420 --> 00:15:11,830 all. 140 00:15:12,540 --> 00:15:23,210 And the second is head of burden's. 141 00:15:24,910 --> 00:15:32,630 That is a line you text a line and know to be upload on both. 142 00:15:32,630 --> 00:15:35,050 More do I see than Also on the tablet. 143 00:15:35,130 --> 00:15:37,940 Chris. 144 00:15:38,060 --> 00:15:41,990 Now you see the text is properly aligned. 145 00:15:42,090 --> 00:15:53,980 Also the buttons also text align and it just looking very good now you see some the on the other screen 146 00:15:54,050 --> 00:15:55,950 sizes. 147 00:15:56,060 --> 00:15:57,270 This is a very great pool. 148 00:15:57,480 --> 00:16:00,770 Almost all of the do faces screen sizes. 149 00:16:00,770 --> 00:16:05,530 Now you can see the header section is looking good. 150 00:16:05,530 --> 00:16:13,430 We have made the iPhone image visible and we have made the headings and the burdens alone to the center. 151 00:16:16,140 --> 00:16:21,190 OK and then just move forward and see the other areas. 152 00:16:21,210 --> 00:16:22,200 It looks fine. 153 00:16:23,330 --> 00:16:24,620 This also looks fine. 154 00:16:28,100 --> 00:16:32,150 There just me the bird or this a bold dash I call an image 100 percent 155 00:16:34,880 --> 00:16:47,700 called a parent girl or parent container you need to edit here or before that I have to copy check for 156 00:16:47,700 --> 00:16:51,360 the class about it really being about section 157 00:17:00,010 --> 00:17:09,350 the thing we don't need it to because the images of all the little kid that do it just to make sure 158 00:17:09,350 --> 00:17:18,860 that it is what and say that that is the image that image should be 100 percent 159 00:17:22,000 --> 00:17:27,740 good home screen says there just isn't 160 00:17:31,200 --> 00:17:34,110 okey. 161 00:17:34,220 --> 00:17:35,970 You know I'm just looking much better. 162 00:17:37,580 --> 00:17:42,020 You see on the screen sizes looks fine. 163 00:17:45,490 --> 00:17:52,740 Livesey on the tablets because their main concern is tablet looking perfect looking quite now. 164 00:17:56,470 --> 00:17:57,910 Everything is fine. 165 00:18:05,540 --> 00:18:07,250 Everything's working perfect 166 00:18:10,870 --> 00:18:18,280 thing we need to fix this isn't all that we take it on the iPhone 167 00:18:21,240 --> 00:18:22,810 everything perfect. 168 00:18:23,110 --> 00:18:23,660 OK. 169 00:18:25,650 --> 00:18:28,890 It sticks lens center a little skewed some padding. 170 00:18:28,920 --> 00:18:33,190 Doc who this is now 171 00:18:42,250 --> 00:18:42,950 here. 172 00:18:43,080 --> 00:18:43,790 She is now 173 00:18:48,370 --> 00:18:49,180 this. 174 00:18:49,400 --> 00:18:58,770 She asks the Burton vidis Santo Olenda Burton live could use some space at the top of this curtain and 175 00:18:58,770 --> 00:19:04,330 view anti-coup that responsive Narcissus and to go inside. 176 00:19:04,460 --> 00:19:08,310 These are the smart devices. 177 00:19:08,340 --> 00:19:15,350 It could be that glass which is built is known and in poaches. 178 00:19:15,360 --> 00:19:16,530 Now we have a. 179 00:19:16,650 --> 00:19:25,520 Call them Desch m d s t retargeted legless and say go get this column dush. 180 00:19:28,440 --> 00:19:41,430 It will get text allowing functors on the block or are to cooked the keep X 181 00:19:44,830 --> 00:19:52,420 purpose goes Wilkey the whole section looks fine. 182 00:19:52,870 --> 00:20:02,080 Everything is on please about to looks fine and then the mission is working perfectly and menus working 183 00:20:02,080 --> 00:20:03,100 perfectly. 184 00:20:03,130 --> 00:20:04,980 This one is looks great. 185 00:20:05,140 --> 00:20:14,950 The features section looks great and now know the Britain is entered the land and we have entered some 186 00:20:14,950 --> 00:20:17,750 space at the top of this burden's. 187 00:20:17,890 --> 00:20:22,370 So it looks fine this conception looks fine. 188 00:20:22,390 --> 00:20:30,430 Nusi we agreed that they have stated it is working perfectly and the counters are working perfect. 189 00:20:30,910 --> 00:20:35,010 Volodin all looking perfect a available onlooking perfect 190 00:20:38,100 --> 00:20:42,640 contact us all I'm looking at so perfect on the small dresses. 191 00:20:42,840 --> 00:20:51,340 So everything is looking perfect on the iPhone 5 work great view and this is because of this break point 192 00:20:51,460 --> 00:21:00,070 which is its maximum Semmens 67 so for small quantities so it would also look for all of these the rest 193 00:21:00,070 --> 00:21:02,340 of the devices you can see 194 00:21:06,070 --> 00:21:06,820 books neat 195 00:21:10,360 --> 00:21:12,440 perfect. 196 00:21:12,480 --> 00:21:19,500 And this is the iPhone 6 that is the Contact Us version looking perfect. 197 00:21:19,910 --> 00:21:23,970 Ok let to see the iPad Wilson 198 00:21:27,370 --> 00:21:28,070 key. 199 00:21:28,370 --> 00:21:29,660 Everything looks fine. 200 00:21:31,130 --> 00:21:32,040 Perfect. 201 00:21:36,090 --> 00:21:39,270 Faked. 202 00:21:41,720 --> 00:21:54,180 And also this is screen size for the medium ones you will do for here everything looks fine and great 203 00:22:00,370 --> 00:22:01,180 Okay fine. 204 00:22:01,180 --> 00:22:08,480 It seems dead we don't need to add custom sequences to these custom Wudi cuties So we will. 205 00:22:08,520 --> 00:22:10,350 But we will leave it here. 206 00:22:10,630 --> 00:22:16,870 So this is the way to add custom media cuties to just the lay out of our Web page for the responsive 207 00:22:17,100 --> 00:22:18,020 the out. 208 00:22:18,040 --> 00:22:24,610 So I think we just need only these media duties and now our site is perfect for the responsively. 209 00:22:24,670 --> 00:22:29,460 You can see them multiple views of apology on multiple devices. 210 00:22:29,520 --> 00:22:32,430 There is another pool which is called ghouls. 211 00:22:32,440 --> 00:22:40,440 Its also a really great tool you can also check your reps say quote responsively old reports multiple 212 00:22:40,440 --> 00:22:47,450 screens like you can see into the showroom if you allow scrolling 213 00:22:52,270 --> 00:22:53,590 smart choices. 214 00:22:55,030 --> 00:23:01,350 And it also has IPART vergence like you can see. 215 00:23:01,800 --> 00:23:05,700 You can play around with Diskworld it is a very great pool. 216 00:23:05,710 --> 00:23:15,370 Ive also added this link to the resource Quane and it also have the small croons you see 217 00:23:21,370 --> 00:23:23,980 so didn't sit for that responsively out. 218 00:23:23,980 --> 00:23:30,430 We are done with the response of the old we have added some custom media Curie's to add some adjustment 219 00:23:31,330 --> 00:23:36,220 to the loss of project and since we are already using them both separately will be taking the complete 220 00:23:36,220 --> 00:23:36,900 responsibility. 221 00:23:36,910 --> 00:23:44,090 But there was still a few things should be adjusted and we make it happen using these medium duties. 222 00:23:44,370 --> 00:23:46,360 Thanks see you in next video.