How to Make Your Design Responsive on Editor X | Editor X Tutorial

in the previous video we learned how to build your design from a design file like sketch figma xd uh inside the editor so this is our version the live version inside the browser and this is our figma file and we build everything exactly the same but it's not responsive you can see that if i shrink the window size it's now i have overflow content right and our menu is not looking good so we need to fix uh to make everything responsive and make it look good or tablet and mobile also okay so let's start so let's start with it with our header so our header is a master component which mean you can see all your masters components here in this panel site masters and this mean that i can choose to display this component uh inside different pages um as much as much as i want and i can control it from here also i can say okay don't display this at home and you can see that this is gone from here and i will bring it back by clicking this one okay so because this is a master component it also have its own breakpoints so let's say i add the breakpoint to this page it's not applied to this master it apply only to the to the body of the of our document so i have a special breakpoint to the master components okay so first thing let's take a look about this padding which is in fixed size 150 pixels so if i go to one pixel before tablet which is thousand and one sorry one thousand and one you see i'm still on tablet but if i go to one thousand it's i'm on tablet now right okay so in our smallest uh screen side for desktop you can see that our it's not looking so good and this bedding it's it's too much right so first thing i can make this one uh in percent not in pixels which make it smaller on this size so our original uh original canvas size with is like our dinner design right so it's this one so i will go back to my desktop design file version and i will make this one percent disparing from left and right and now if i go to 1001 you can see that this size is getting smaller okay nice but still this is not looking uh look the best right so i can add a breakpoint in the middle to so in the in that breakpoint i can rearrange stuff but before i will do it i will add one more change i will make this button uh responsive which means i want this button width to shrink when i'm in different window size okay so i will set this width to to be on vw which mean when i shrink the window with it's getting smaller you can see but i will say i will say to it don't get smaller than something okay so this situation will not happen okay so let's say don't get smaller than this size so i can go to uh max with no sorry i need min width to be in pixels okay so let's say 120 pixels we don't need this but same for the you know what let's let's not do it now let's do it later maybe okay but you can see that i can control the wii the button with uh depending on the screen width okay so we said that okay this one is not it's not should be docked to the top okay so we make this padding uh responsive let's bring it back i did undo so and we need another we need more space here right so um so let's add a breakpoint so i want to say um let's play with it a little bit i said let's let's say here it's like it's getting too close to them to the menu in the center right so i want to add back point here okay let's make it like something like this okay and now i can go here and add breakpoint done okay you can see i have another screen here okay so from here i have a wrench here so i go to the the biggest sorry i can say okay um i don't want this padding to be this big i can say be 50 pixels okay from left and right 50 pixels and now i have a bunch of place and let's start to shrink okay but here you can see that we are almost at the left the smallest screw screen size but it's still not looking the best right so i can make this button smaller 120 and you should be also smaller and you can go a little bit right okay let's remove the docking from top and i can make this icon smaller you will be auto so it shrink when i change this width it will keep the spectator so now it's smaller and i can play with the text size let's say 14 and change the width to 400 now it's too much and change the behavior well i still need 420 okay so now it's look better but not not the best okay okay i forgot to do something okay you see you saw that when i select this uh section i have three break points when i select the header i have four breakpoints okay so they they are not getting same breakpoint so i can say to this header to change his height according to the window width so let's remove the main height of the header and let's change the height to be in viewport width so now when i shrink the the screen size you can see that this is the header is getting smaller right great so now everything looks better and now you can see that i mean one thousand and one and it's look it's look pretty pretty okay right oh it's too close all right and i can change the height of the button to be 42 and also this one okay so we are and now we can go to the tablet okay so let's go to the tablet and in tablet i know that i don't have enough space for this menu so i will replace it with humble gear menu which is automatically happened but i need to select it so if and i don't even need a sign up and sign in buttons here because you will see okay so this is my hamburger menu and let's uh dock into the right side and we can change the shape of it we can add whatever we we want um okay so let's keep it uh same size same design and if i open the menu i can see that i have the basic menu and i need to change it to our menu and now we have everything here okay so we can design it to look uh same as our uh site site design i don't remember what it was this font is or have it in the theme it's rubik okay so this one should be rubik where is the rubik rubik's medium okay this is ubiquitous this should be a regular maybe okay and we can change the alignment and the spacing okay so let's skip it that way you don't really design everything here but let's say there's the selected will be in red in our range okay this is for drop down menu but for sub menu but we don't have it here all right so we don't we basically don't need this button but we can put it inside this menu right we can put it here we don't have to but let's say okay we want to keep to keep it here but [Music] we will change it on mobile because on mobile we really don't have enough space so in tablet let's let's delete this uh responsive header height and make it fixed let's say 80 pixels and everything should float in to the center and this one should be docked today to the left okay something like this and okay so if i preview i can see that my this this is replace our menu okay so on mobile this is a mess so we don't need a button we want to put it inside the menu so let's don't display it from here and you can see that i select the vector the the the logo and i need to select the sign up so here is the sign up so i have to sign ups oh it's the same it's the same one with same name okay so let's uh don't display this one okay so now it's look cleaner and let's change the padding to be something like 30 pixels from left and right and let's dock the hamburger menu to the right side and the our logo to the left side and let's shrink it to be 70 pixels even smaller 60 pixels all right so the last thing we need to do is to add our deleted [Music] buttons to to our menu okay so i need to copy let's copy this one and add it to them to our menu let's open to the menu and we need it only on mobile right because we have it on tablet here and we need it on mobile so let's open the menu and i click command v and paste it here all right and now we need the the other sign up button this should be signing yeah it should be signing all right let's copy and go to the mobile open our menu and command v paste it here awesome and we can stack them together so they never overlapping each other so let's select the mega menu the sign up button the sign in button and stack them together beautiful okay so let's preview it we are on mobile and we open our menu we have the sign in sign up buttons we can you can display it whatever you want i just put it here and if we will go to tablet and see we are on tablet we have the buttons here and if we go to desktop you can see that we don't have the humble game menu our original menu is coming back and this i mean i like it it is look good for me okay so i forgot to tell you in my why i'm doing like freely and not according to our my design file the reason is simple is basically because i don't have a design for tablet and mobile in this uh this figma file that i download so i'm doing like i do whatever i want so uh so we're done with the header and now we can uh go back to our hero section so same here we need to make all the padding uh to be responsive so we need it to be in uh in in percent but it's it's important to do it when you are on the right with the canvas feed with which is this one all right so let's make everything responsive okay so now it's it's not look good yet but okay let's let's check okay our image is not responsive is in fixed site so the easiest easiest way to make it responsive is just to click the fluid and now it getting smaller with our screen size okay so next thing we need to add some um text scale to this big title so they can live together in the same state okay so when i shrink it you can see that the image is getting smaller but the title is stay the same height right so i know that the text size in my design is 50 pixels right so i will go to my original screen size and change to text scale with this button okay so we said we're going from 50 to this 10 pixels is in it it's going to be this text is going to be 10 pixels in mobile okay this is 10 10 pixels okay so we need to play with it we need to go to 1001 and right oh another problem we have here is that the text that the stack element is in fixed size so it also should should be fluid okay and now you can see it's already look better but not the best but better okay so now everything is more responsive okay so in 1001 my title is getting too small okay so i can play with it so let's say 20 and not 10 okay and my button is just look too big right so i can go back to 140 and said okay your width will be same as the stack width uh same same as the yeah so in percent okay but if i go to 1001 i can see that no it's look good actually okay but the height it should be also responsive so 40 and let's say your height will be in view width okay so if we go back to um 1001 and now the cta is better but it still is you know it's it's too thin right so i can add spacing and now it's keep padding inside the button of 50 pixels from top and the bottom okay and now it's look better all right so you can see that i'm ju i'm not i'm just making make it um responsive is inside all the [Music] i said all the desktop versions not we we are not in a tablet yet okay this is all a different uh screen width of desktop okay the desktop devices and i just want to add some padding between the image and some margin between the image and the stack element because you can see this is maybe too close so i can go to the grid and add like i don't know 20 pixels gap okay so they have a little bit distance between them okay so we are good with the tablet with the desktop and we can go to the tablet and i can say okay now it's too tight right so first thing i can change the padding to be like the like our header which is 50 pixels so 50 pixels left 50 pixels combined right so now we have more space but still it's too small for this title right so we can adjust our uh we can adjust our grid we can go to adjust grid i select this section and click adjust grid and click i have a suggestion so you can see i have a horizontal alignment so i click you can see one click and it's automatically adjust your site so we can uh change the title again and this is the cascading rule okay so i get this uh information from the tablet from the desktop version it's the same as here okay so here i can set new properties and they they apply only from tablet to mobile they will not affect the desktop version i can show you if i let's say change the alignment to the right and i go to desktop the alignment is to left right the alignment is two left okay so i can change the okay so nice what happened here okay it's now connect disconnected from the it's not inheriting the properties from the desktop um this stack is getting too too big so i can limit the width by add me a max width okay so let's set it to pixels and that says you can be 100 as long you don't cross let's say 600 pixels or 550 all right something like this this is look better and i changed the padding from top to b also fixed size 50 pixels and i need a little bit gap from the from the bottom between this one so i can add gap 20 pixels we don't need this one all right so now it's look better right so next one is this section with this information box so same here we need to set it to be uh margin in percent and let's see what happened okay so i have okay here we maybe need to use some trick let's see the definition of the container grid so they all equal okay and okay this is our smallest screen size before tablet so we can add um okay you can see there is a margin here right this is the gap okay we can play with with the text scale we can add text for this title we know we start of 25 so 25 to let's say 60 okay and here let's say 20 to 12. all right i like it so i can uh copy element design for more breakpoint and paste it right here and this is easy way the easiest way to apply changes to same type element okay so let's do it again here and paste it here all right and the next thing i want to play with the vector out height okay so i will go back to my old original screen width and make it fluid let's make everything fluid but you you will see that this is getting too small okay when i shrink the side you can see that this is too small right relative to the text so i can set minimum we was on 55 so let's say your main width will be 40 pixels okay this is 45 pixels same for everyone so this one is responsive but it's responsive only between 55 pixels and 45 bits you see now it's it's a big where is it oh it's writing so this is the big version and we need also sorry i forgot to do it we need also to set the max width to 55 pixels okay so let's set it to everyone so now it's responsive between 45 and 55 pixels so this is the 55 pixels version and when i shrink it's getting smaller but not smaller than 45 pixels awesome so there is another thing we need to make responsive which is this padding which is in pixels picture uh pixel size let's make it responsive and also this pairing inside each container let's make it responsive really quick all right so now we go 1001 this box is look okay right awesome so let's go to uh tablet version and i want to keep this layout but i want uh more space so i change this again to be 50 pixels and i think we we are good all right um next sec okay we forgot to make the mobile version for boats so let's go to mobile and this one should be fixed size let's say 160 great this text should be 16 i like it and this text should be uh this is the biggest this is the smallest it should be bigger definitely from 20 let's say 26 and let's change the padding of the section to be 30 pixels from left and right like our header it's the same padding and okay i think it's okay maybe let's change the margin to be 45 pieces but this line break i don't like it so let's play if we did it again something like this okay okay i like it so this is good let's change the the margin to be in fixed size let's say 50 from button but 30 from top okay and now uh this this is look good on tablet but on mobile we don't have enough space on mobile right so let's change it we can do multiple things we can hide the icons we can hide some text let's think let's see what we need to do here this padding isn't fixed size why oh i forgot it so this should be now it's okay uh we can change the grid layout to be uh in rows not columns okay but this is too big right so let's adjust the grid and set your minimum will be 50 pixels not 200 you know what let's set it to be max content this is the best max content and max content alright so this padding should be 30 pixels like our mobile padding and we have a line here but we lost it because it was a a vertical line but we need a horizontal line you can see this vector out no oh we didn't add uh i i show you you can you can see there is a very light line here this is not actually a line this is shadow of this container if you remember we set a shadow to this container with with no blur so it's look like a solid line so we just need to change the direction of this line it should be from top to bottom so it's zero and same for this one zero and we're good to go this one is not having a shadow right so now we have like a divider between between them but it's not it's not should be like from edge edge to edge so we need to add some padding to the warper container so let's say 20 pixels from left and right and now you can see that the line is stopped right before it's at 30 pixels all right uh next thing we need to do is i just need to make sure this is not smaller than 40 pixels so let's say 14 and four pixels if you remembered uh this text text scale you inherit from desktop so this text is 20 on desktop all right we should play also with this margin because it's too big let's say five pixels from the stack merging the element inside this track and we can also change the gap between between the vector art and the stack element to be 15 pixels no maybe it's too close 20 pixels yeah something like this you know what let's yeah 20 pixels i think it's okay all right so this is look okay and now we have let's go ba let's go to the next section okay so this section should be pretty simple so again we make everything responsive all the padding responsive so in percent everything and let's make sure our image is fluid and let's go to the 1001 and we can add some text scale to although it's it's look okay i think but it should yeah maybe a little bit protected so from 35 sorry 35 to 28 let's see maybe 26 okay yeah okay and okay this stack element is uh in fixed size which is not good so let's go back and let's make it fluid it's 70 from his this is 50 pixels and we can okay we can say something else we can say you will be 100 but no bigger than uh this pixels on one fold yeah so it try to be 100 as long as it's not bigger than this number okay so so you you can see it's uh in smaller screen size it's now 100 percent of the set and it's responsive all right so let's move forward to tablet and let's make all our padding 50 pixels from left and right and we can change the grid same as we did here you know what let's make something different here here we just make this one is smaller and so we can play with a grid cell let's say you are equal one and half size all right so this image is support this text and we can even dock it to the the top all right and we let's add some padding more padding here uh let's say 100 no it's too big 80. all right so on mobile this is really bad so let's adjust the grid and change the alignment and now it's look better all right so let's add margin from top let's say 30 pixels from top and let's change our margins to be 30 pixels like we said in the others uh in the other sections we stay consist and okay and now we can go forward to the next section all right so this section we have like an image background image and we have a repeater we have a container that contains it's not repeater it's it's container which have three containers inside of it all right so just save my changes and now okay this one is pretty bad it's not good that you have two elements one under each other and they don't they need some relationship between them because they can overlap each other it's not the case but this is bad product practice so let's make let's make them uh i don't want to use stuck we can stack them together but this is already stuck so we can add grid inside this container and title and description stay on its own row and this info box will stay in the second row so let's apply grid two rows and now i can this is already on the first row you can see in the grid area it start from one end on two but this one it should let's say it should start on two and end on three okay but let's just remove the margin from top okay and let's remove the section height we don't need it the content is at the height of the section and let's check in our design what is the margin between them so if i select this one it's 60 pixels between them so let's say this container have 60 pixels margin from top and let's see why we have why this row is so high it is so big it should be as high as the content so it should be a sighted stack element plus 80 pixels margin from top right so let's change this section let's check the section rows height we can see that it's got mean height of 300 pixels so let's set it to be max content and this one should be also you know what let's set it to be far which mean take all the rest of the place all right so now it's look like this which is much better um okay so let's see the definition of this box it's in fixed size okay so same method here i i said okay you you want to be a hundred percent all the time but you can't be bigger than this number so your max number will be the same and now i can set it to be in percentage 100 all right so let's see what happens so it's now you can see it's in fixed size right but okay we need to add some i can't say you will be hundred percent because hundred percent this this situation so let's say you should be 90 all right so it is 90 but the problem is that these containers um something here is making everything big you can see that something here is in fixed size which is make each container to not shrink responsively so first thing i can see that all the padding here is in fixed side let's go to our original height yeah with kind of sweet and make everything responsive so basically um when you build stuff uh multiple time you you already get it you already do it in advance you don't need to do exactly like i i'm doing it but i'm just i'm doing it because i want to show you the the how how i get to to do things okay so let's go back to 1001 and now you can see this is much better i mean still uh it's not the best but let's see what so our image is in fixed size so again we can make it fluid right so let's see let's let's make all three of them fluid oh no so now it's getting worse so i i don't know okay but let's see all right so our buttons is also in fixed size so let's make them fluid and let's see all right we need to find out what is the problem what is so small i don't know uh this is weird okay i think i know why it's because of this if i will remove it okay so we need a plan this one is 100 percent okay i can see that this text have mean width of 190 pixels which is very very bad so none none and none all right so you see sometimes uh you don't pay attention to stuff and this is what happened okay so i can see that this padding is too much for me right i don't need this much bearing so let's see if we can make it differently so instead of instead of use this padding which is huge padding we can say something else we can make this stuck element fixed just for a second and this is one also and let's remove this padding so make it zero you know what let's let's keep some padding okay we want like something so let's say 30 pixels padding across all the sides but this one it should be docked to the center and now i make it uh fluid with um i make it fluid with max width okay so let's say max with 200 and make this with 100 so what happened now this stack element it's trying to be always 100 of this container but there is a limitation of max width of this size okay so i want to do same thing here right so it needs to be docked to the center and they all should be the same okay so maxwedo and 100 same here all right so let's change the padding to be 20 pixels uh 20 or 30 30 pixels sorry pixels all right and this should be docked to the center and also this one all right so now this should look good on 1000 nice very nice all right all right so on on tablet we don't have enough space so let's change the the grid to be in rows and now we can even change how each one of this one is looks so i can say i can say what i will do we need to redesign it basically the way i did it i can't do much i need to change it so if i will do like if i'm unstuck it and now i stuck them together they need to stuck together and i need to make it again max weed and these four containers one two three for i will i need to stack them together this one is okay so one two three four i need to stack them together and i need another row here below between the cta and the image and this one should be inside of it so row two to three and let's set 30 pixels margin okay something like this and now uh again this should this one should be a hundred percent with with max wid of 207 pixels and same for this one okay so now if i so now they are not identical okay but we will make them identical but when i go to tablet you can see that i have more control of my design when it's stuck together i can i cannot do unstuck because it's it will make unstuck also in desktop okay so here i can set okay let's change the alignment to be in columns and now look it's look much better right it's not like too long uh design we can change this a little bit to be basically you can do you can play with it like this okay okay i can make this one is bigger smaller but i want to be more precise so let's say you are 1fr you are uh one and a half this one is to depend on two oh it's too big same mean with none all right um this text element to floating and it should stay inside its own container all right i don't know we need we need to play with it but i don't want to waste so much time on it okay so basically what we need to do is to duplicate this one and use it for right so let's delete it let's delete this one and let's duplicate it so duplicate and stretch it and only play replace it in its own cell duplicate stretch and on its own cell this button should be we have some content to fix here but you know what let's do it this one should be regular and different color uh okay regular all right ah this button is not the same as it should be so we can copy the design from here copy element design and paste it right here only the body radius should be rounded oh no i changed this one all right oh and this border should be it's like selected but it's not true but let's make it all right so if we duplicate it it should be it should look good already on tablet but they are all in the same cell so let's fix it where is it okay so this is the first container it should be the last one it's three to four and this the middle one should be two two three and let's add a gap between them inside the container we have a grid add gap of 30 pixels between them between the plants and now it's look like this very nice and on mobile we can go back to our desktop design okay uh so let's do something like i wonder if we can make something even more okay so this uh warper container should look uh the same but the inner one it should go back to be horizontal okay so let's see why we have overlapping of maybe it's because of this one so let's change the grid for all of them and now they all should float in center okay nice but why we have like overflow content i guess it's because of this one but i'm not sure so to be sure we can set um [Music] height to the overflow and you can see that this is not the case so there is something here that makes our section too big so we need to find it uh this one should be stretched i think all right and maxweed okay this is our problem the title okay the title is in fixed size you can see yeah here it's not a problem but on mobile it's very big problem okay so let's make it present let's make it [Music] this background image should be stretched okay so no it's not should be stretched but actually we don't need it here so don't display alright so this is the title and description will be ninety percent uh event let's do it okay and we will play with let's copy this 35 to 26 actually we need to do it in desktop so it's inherit all the way 35 26 all right so so now you can see all our container looks good but we need to change again the mean height okay we don't need it uh to be with fixed size so let's set it as the max of the content all right so i want to adjust the grid again max content all right you can see that this this is not having a padding between them though we can add a from here let's say 20 pixels between 30 pixels okay 30 pixels between everything so we don't need this margin from bottom and we don't need this mounting from top so they all equal so let's do it again here 30 pixels and remove this one all right better so last one is this one we already know what to do exactly so do it pretty quick uh 30 pixels right remove all the margins unnecessarily margins all right perfect so we are good with this one so let's go to the next section this one so we need same deck scale 35 to 26 right oh what i did uh 35 to 26 right what what this line height is you know what let's keep it that way and try it with it later okay so this image is already fluid you can see but this padding is not fluid so let's make this bedding [Music] let's make this padding uh percent great let's go to tablet let's look good oh why it's like this let's copy it from here all right so on tablet i can say okay you will be 400 you know what if if it's fixed size it can be like fixed with with no tech scale we don't need a tech scale here so you will be 35 pixels okay and also here you will be 35 pixels you don't need a text key all right uh so let's see how it looks on tablet it's look good but you can see that this one have mean height we don't need this min height we want this section to be high as the vector art the map image so let's remove it and on tablet now you can see that this is exactly this look uh great so let's change this gap between the map and this padding let's change it to be 50 pixels okay now it's look much better and on mobile it should look the same right i mean this one should be 90 percent it should be fluid 80 percent even and let's change this text to be 24 pixels and if we go to wii 24 this one should be also 24 pixels all right this margin is too big let's make it 50 okay and we need 50 from top also here 50 pixels from top and here we will make it smaller to 20 pixels between the map and and the map now it can be like 90 percent a little bit bigger all right next section next section is the it's actually a very simple section because we have all we we have just the image here so the image is already fluid but here we can i think it's okay maybe let's say 85 pixels a bit bigger and on mobile it can be like 90 px 90 okay and let's make this padding smaller 30 pixels from bottom and 20 pixels from top and it should look something like like this all right next section next section is this one it's only the title and description we said we don't need um a text scale because it's a fixed size so only on mobile we need to change it to be i don't remember 24 pixels 24 and it should be fluid to 90 to 80 percent no don't delete it same as here all right beautiful okay so next oh it's padding okay it's already responsive okay so this one is our repeater so let's what we want to do let's make this margin at this padding press in percent and solo let's see how it looks on the our smallest uh screen width which is look okay and i wish i think i need to do something else here what is this padding is eight percent so let's delete it and add it to the repeater eight percent and now you can see okay my problem was i will show you [Music] you can see when i'm scrolling you can see when i'm scrolling the cards is cut here okay and i don't want it to be to cut here i want to to keep scrolling and and and only disappear when the pages end so instead of add the padding to the section which is limit the repeater width i am removing it it's one it's 125 so i will remove it and add it to the the repeater itself padding from left and now i'll make it responsive and it was like eight percent and now you can see when i preview that it's keep scrolling and end like here okay which is much better experience right all right so let's go to um our smallest desktop size let's look like this which is okay i think and let's go to tablet and on tablet i want to make everything uh smaller so if you remember this is a repeater so if i change it here it changes across or across all the cards so let's make it 40 and it will be 16 and it will be 12 and it will be 40. all right and maybe this one will be 45 so now everything is a bit smaller and we can play with the with the margin between each card uh make it like 50 pixels and we can play with this margin to be 50 pixels now it starts from here and i think it's okay i think it's okay and these buttons should be docked to the right side with 50 pixels mounting and make them smaller like 50 pixels all right all right um and let's reduce this margin from bottom to be like 80 pixels even smaller 50 all right so now we can basically we don't need this padding from top now it look better so let's go to mobile and again this one oh we are on this one uh we can we can keep it like this i guess no only play with the margin to be 30 pixels even 20. yeah i think it's okay but we need to make sure that each card is viewed of 100 i think something like this you know what let's preview it so it should be smaller than 100 it should be like 90. and now you can see i can see the full card exactly and i have another thing i can do i can make a scroll snap so each one when i scroll is go in go to the viewport perfectly you can see that i know i don't need to be precise when i'm scroll i'm just a little bit click and it's already center all right awesome but we have a little we have we still have like overlap but i guess it's because this container will fix everything just a second okay so let's go back to the next section and the next section is the subscribe section okay so this one is not fluid is in fixed size so as we did before i want to make it fluid but also i want to have a limitation of the max width okay so i will add the max width here and make it try always to be like 90 percent not 100 because i want a little bit gap here so look what happened when i shrink the side it stay the same stay all this all the same and now it's 90 and it get responsive okay so here it's not responsive but here it starts to be responsive okay and this is good for us on desktop let's look great in desktop so let's fix it on mobile i i want to keep this uh layout but just to play with uh the title let's make it 24 and [Music] i can play also with a padding to make them smaller let's say 30 pixels from top sorry from right this button can be smaller and i can change oh this stack element is fixed size so i can make it fluid and add some margin gap between the button and the city the the description let's say 30 pixels and i think it's look okay and maybe the this margin should be smaller okay maybe too much padding from right and left now let's make it 30 for all and this should also be 1fr maybe no but let's make the gap bigger and i can always uh change the text size or make a max width to the text element let's set max width and this apply all just for the tablet and i need to dock it to the right side to the left side and now it's look better okay so you can see that thousand is the biggest tablet view and look how it's far from each other right so i can always add mac suite to this container let's say to 700 so now it's it can't be bigger than 700 all right so i think we need a little bit more padding all right um okay so on mobile i want to change the layout so the description will be inside one row and the cta will be in the in the second row so i can adjust the grid and quickly change the alignment like this really really quick and just i need to adjust the height the bs muscle x is the content and i can add gap between them so now i just want to change the alignment of the text so it stays center and change the padding it's too much padding i can set it to be 30 pixels for all and this one because i have like a single letter okay this cta should be in descent always in the center this button and also this text but it's 100 percent so it will always be the center but this title you can see that it's stuck to the right side so i need to make sure it's always center all right and this one should be 24 okay good all right i think it's okay maybe it's too big 54 and 180 all right so let's look good on all breakpoints and now the last part is our footer so let's see how it look on 1001 and if you remember we can add special breakpoint to the master it will apply only to the master so first thing we can set all this margin to be in percent not in fixed size and this pairing also should be i will keep this small padding i think it's okay to keep it we will see later and this one let's see the definition of the grid all right great so now we can go to 1001 and we can see that this is almost good it's not the best it's almost good i still have overflow here i don't know why you figure it out um okay basically this one is in fixed size okay so it's taking a lot of space you can see it's 3 and 40 pixels so if we make it fluid so now we have place for all right but you can see i make it fluid but when i go to back to this one i have one long line right because it's all you say basically you said okay before it'd be 100 of yourself okay so i want to say okay be 100 but as long you are not bigger than this size okay so now you can see that this is always three 340 pixels but when 340 pixels is smaller than 100 it starts to get responsive so but we don't want it to be like too close so we can say okay be 90 not 100 okay even smaller let's say 80 okay so it's so it's combination between fluid and fixed size okay so be fluid as long as you are not bigger than something all right great so on tablet we need a whole different layout so let's adjust the grid if you remember this container this folder has grid in it we can adjust the grid and now we have uh this suggestion is pretty smart because they are they giving you suggestion according to your layout of the grid so we need like i don't really know we have like let's let's think we have four content for a stack of content but we want i want this one to be separate okay so let's make it step by step i just read let's say we wanted one on top of each of each other okay so this one should be the last one okay so let's say we have one two three we have eight okay so it should be nine to eight no yeah eight to nine this is the last one okay so this one should be you know what i will eat another row here because it will be too big so this one should a be percent we sell and it should go to two to three all right and this is neighbor so we will go also two to three but in columns two two three so they are neighbors now we have too much rows here this one should be three to four right and you will need to fill the whole space so all right and the last one is this one and it should be four to five all right so we need to delete all the extra rows we have we don't need you delete delete delete and this is the last one but now let's set everything to be max content oh you can see that this is collapsed twice collapsed because the stack element this stack element the first one is not in the only one columns you can see that only one row it's on one and two if we bring it back to two now it stay on its own column so let's back to adjust grid let's set everything to be max content same problem here we will fix everything all right so let's make sure each group of elements is inside its own container it's on row and columns so this product menu should stay on column one on two and two to three this one is okay but this one is not okay so it should this is right and this is not right all right it should be fluid all right so last one we need to add gap between them let's say like 30 pixels right this one you know what this one can be here and then we can delete another one so you can go to three to four and two to three let's stack it to the right side all right i just forgot to do something so i need basically i need to delete it after because it was max content so let's make it four to five so basically what it's max content so if you remove content from this cell this cell is getting zero so if i if i want to delete this extra cell i need to delete it when it have already items in it so let's delete it and now you should be uh two three yeah this is the right but this one is not right and also this one three two four oh my god what did i do it's two two three this one yeah i messed things up but now it's okay all right so our padding it should be 50 pixels not percent pixels 50 pixels okay uh great oh let's make it center all right so on mobile we need to adjust some things uh we don't need the extra row column we need just one but let's count the rows we need we have one white great we have our container this is created on four stack elements so we need five cells let's go to the grid and we have only three so we need to add another one so let's can i move it now okay i can do like this let's add another one here and another one here all right so now let's make sure everything is stay on its own cell so this one should be on its own row and let's go with the last panel it's much easier so this one should be two to three this one three to four three four and this one should be four two two five and this the last one should be five to six great now let's make everything align the best way everything should be a hundred percent with oh it's on sale awesome so it's look like this let's change the padding to be 30 pixels and basically we are done i think this one have margin or something no it have a min height of 1 pixels so let's remove it so it looks like this this is our menu and all right i think it's look good so our site you can see that we don't have any overflow here not let's we have our menu let's publish it and see on the live site so this is our live site and now okay so now everything is should be also responsive look how beautiful it's it's react and boom we me we don't see the menu right now here's the menu here is gone and now this is w right and now on mobile we go to mobiles right and now we have like this menu and look everything is perfectly aligned very very responsive and here look how cool is that we changed the layout of this card so it have multiple layout for each breakpoint and the map is responsive and then our footer is responsive and subscribe nothing is break our repeater is working great and i will open my actually um mobile device and i'll show you how it took only this one is it's too big now let's see why this uh paragraph it's too big because we remove the max content i think so let's say max content of this is the biggest element or 555 and now if you go back to the look how easy how it easy to make things go to production just for a second all right so this is how the site look on my phone i mean you can test it on your own but there is some adjustment we can make but overall overall this is look pretty sleek right everything is look exactly out there how i want it to be and look if i slide it it's perfectly centered this is our subscribe and this is our footer looks like and this is the menu

Channel: I Love Editor X

Views: 1,355

Keywords: responsive, editorx, editor x, tutorial, tutorials, make, design, fluid, figma, make design responsive, wix, wix editor x

Id: DXxJMKQh7b8

Length: 98min 59sec (5939 seconds)

Published: Sat Mar 06 2021