Mastering Layout Techniques in Oxygen Builder - Part 1 (Flexbox and Sizing)

hello everyone and welcome back to the channel today we are going to be taking a look at mastering layout techniques in oxygen build that is going to be a very exciting one um the aim of this video is to show various techniques you know you need to know or you need to understand in order to build a complex layout each lesson we're going to learn will serve as a building block so to speak for the overall knowledge of putting a descent website together in terms of layout all right let's get into it so i have selected um the list of things i want to talk about and one thing is going to be glaringly missing which is greed i'm not going to be talking about grit in this video because um i i think that should be handled as a different topic on its own okay so i'm going to be talking about so many other things specifically i'm going to be talking about flexbox okay and i'm going to talk about the different positioning the most widely used positionings and sizing and spacing and i'm i'm also going to be talking about uh pseudo elements specifically before and after because of the important role they play in page layout so uh first let's talk about flexbox i mean what is flexbox it's what we use in oxygen you know oxygen is based on the flexbox engine so um we use it a lot so we use display flex you know start horizontally and all that so we're going to take a deep dive into the the features of flex now uh one of the things i've realized is that a lot of times we don't really um use if you go to layout there are a lot of things about the flexbox that we don't really use or let's say most people don't really use it except those i really understand how flexbox work and that's what we're going to be taking a look at um what is flexbox it's simply a short for a short for flexible layout it's just that's just what it is flexible layout flexible makes it easy you know to design flexible responsive layout structure without using the previously preferred float you know which was a system of positioning elements on the website or different kinds of positioning the flexbox properties are supported in all modern browsers and i'm i'm just going to go ahead and demonstrate it now okay so i have with me here um a div i've just i have a section with a heading okay and a div and in that div i just have three um cards okay so these are just regular cards um that you know they have classes all of them share the same classes the card image uh the card uh name that is the name of the whoever is here and the card description and they're basically the same three of them okay and right now they are just there nothing is applied no styling is applied to um to the container you know to the parents okay so what if you want to stack it you know horizontally three of them now one of the first thing that people usually do which i'm going to start with with okay will be to select this card and then because i want to stack it three i want to make it like you know the width to be three one over three you know so which is gonna be 33.3 percent okay so that automatically makes you know it's one third of the width okay of the parent so the parent is a hundred percent okay with and this is going to be 33 um of the parents and now we can go ahead and stack it horizontally now i want you to take note that let's let's back up okay now if i remove this 3.3 and i stack it horizontally it's still going to stack horizontally okay it's still going to stack and which is fine um and we're going to take a look at the importance of that but but for now let's let's just keep it at the 33.3 percent and see if there is any downside to doing it that way so i'm gonna stack it horizontally now and uh to space it one of the ways when it comes to flexbox is g is usually a challenge you know to to give it a space and uh if you're using grid it's very simple grid has the grid gap which is supported by all browsers but the flexbox also has a gap property so if you go to uh css custom css of the parent element and then you just write gap and then let's say one m okay now we have that gap and even if you stack it vertically you see that gap is still there but it's not really supported in most of the browser did i say most that's wrong it's not supposed in some of the older browsers you know like the older safari the older internet explorer but you know it has up to about 87 support and if you really don't want to risk it so you're better off not using it so let me take that off okay so what's the alternative um the alternative one other way you can use it is if you make this less than 33 so let's say uh you you just calculate you use a calculation function okay let's say you calculate 33 okay then you subtract that one m let's subtract 0.5 m okay from it and then we're going to go to the parent and you know make it space between let's do that again okay this didn't work because we need to give it a space here okay so uh please take note that calculate function the operator needs doesn't have to if it joins it's not gonna work okay so now so that that separates it okay um yeah so that's just one of the ways to to do that i'm just gonna take that off uh but what is the the downside of using you know one third of the width okay what's the downside let's assume that maybe this was gone so you can see that we have a gap okay let me just release however you do it you're gonna have a gap you know this is not gonna automatically fill in that is one of the downside of using specific width for the flexbox child element and the truth is you don't really need to do that if you want a three column you know flexbox layout you really don't need to make each of the cells one third so let me take that out completely and see what happens and it's actually good if you make it a hundred percent okay so you make it a hundred percent and then i'm going to bring this one back so you can see that um using a hundred percent still gives you the same result now when you use 100 you're not going to be able to do that calculated you know technique to give it a space okay you won't be able to do that it's not going to work okay so what you're going to do is you will have to give it um you know the normal margin right and take it off from the last child okay so let's say um we're gonna give it a margin right of 10 pixel okay but then we want to take that out from the last child so we'll add a pseudo element and write last child okay um so the last child selector okay so that takes it away now that is assuming that you have just three so if you had more than three you are not going to use last child for instance if i had uh no not necessarily more than three what i meant to say is if you had more than um one column like you had another one under okay so it's going to you you have to specify whether it's gonna be the end child three okay or the end child um six so one of the advantages of using this technique you know using a hundred percent for all the columns is if you if you wanted to conditionally output any of these divs and you know and then the condition wasn't made okay so let me save this and go to the front end so you can see that the three divs are there okay don't mind the fact that they are not the same height okay we're gonna that is very easy fix now and then i place a condition on this and say uh do it if the author name is equals the neighbor okay and then i save it if i go back to refresh you see the remaining divs you know take up the remaining space but if we had 33 percent okay for this card if we had 33 percent of the for the width you know like we did initially this is what we're gonna get so it's gonna be obvious that you know there's something missing here so that is one of the disadvantages of using that other approach okay let's quickly take a look at another way to add the spaces okay so um let's remove this and child selector and i'm gonna take off this and then i just want to clear that condition okay one of the way you can add space you know to this um flexbox char element is to use what you call the adjacent child selector so you want a situation where um you apply a left div okay so let's say we want to apply um sorry left to my left margin okay so you can see that this is affected so you want a situation that you're going to apply to to only the div that has a sibling next to it okay so this doesn't have a sibling you know next to it so we don't want it to to apply to this so we're going to use just a custom css to do that and i want to encourage you even if you're using a page builder it's really important that you get comfortable you know using you know custom code because there's just a limit to how much you're going to be able to do complex layout if you depend only on the builders settings it really doesn't matter which builder you're using it doesn't matter any builder you use cannot give you everything you need for for an unlimited layout capability okay so you're gonna use just get comfortable using if you could not nothing much okay so i really don't want to go into the style sheet because it takes too many clicks so to make it fast i just want to drop a code block here so and use that i'm going to use that css here so um now to apply that i want to select the i want to select this the idea of the parent okay oh i'm gonna oh i could give the the parents a class i could just call it card uh card parent okay and now i'm gonna go to that uh code block to the css okay and then i'm just gonna call that card parent class and now i'm gonna use the direct child selector okay and but i want to select now these i think that selects all um all the child margin left 10 pixel so now it gives 10 pixel but even this first one okay has that 10 pixel but we don't want all the children to have 10 pixels so we want children that have sibling so now that's what that means now you can see it applies only to this and this because this has a sibling next to it okay but this doesn't have a sibling next to it now what i mean next to it is before it so this means the parents of the card classes okay um is selecting only the cards that have a sibling before it okay so it's not selecting this one so that gives so there's no need to come all the way here and you know take away any margin that you don't want so this is kind of a perfect um solution for it okay let's take a look at another situation now that we have um these cards okay being a hundred percent what if you want to have a layout with maybe two d's okay but one of them is uh let's say 70 or 60 and the other one is 40 or 30 let's duplicate this okay i'm just going to duplicate that now i want to i want to give this second set of cards a different class so i'm just going to call it car 2 okay and i'm gonna copy most of the i'm gonna copy the properties here and then i'm gonna delete that so i'll do the same here i'm gonna delete that class from there and apply it here okay delete this all right so we have a different set of cards here okay um let me just move this yeah i wanted to move this up here all right so just to make it look different okay all right that's that that all right so that looks a bit different okay now um what if we wanted to make these let me take off one of these cards so i'm going to take this off let me just delete that completely what if we wanted to make this um 70 and this 30 percent that that layer that we're all familiar with normally what we usually do is to go to the id okay for instance you can come here let me remove that hundred percent from here so for instance you go here and then you make it 70 percent okay and then you go here and make it 30 so you have that and you have that layout um but we're still going to be faced with the problem we talked about earlier where if you want to conditionally i put this or this div is not available we just have this space hanging there okay so um what are we going to do let me take out that that unit okay value rather so um now let's go back to our card and then we're going to give it a hundred percent now but we want this to be 70 but we still want to solve the problem where if we don't have you know the second card um this one still fills up okay so how do we do that so what we do is we go to the card okay and then what we're going to do is now we want the first item or the second item depending on what you want so let's assume you wanted to we wanted the first item to be 70 so i'm just going to go here and just our first child okay so we're going to have the first child to that card class and then we want the minimum width of that first child to be 70 okay so that's all we need to do we don't even need to do anything here because automatically it's going to shrink okay um but this we want it to be 70 now if we have a situation where this card is no longer available that will still grow and feeling okay and if we have a situation where this card is no longer available this will still grow and feeling so now these cases are particularly useful if you wanted to like i mentioned earlier conditionally i put certain things for instance when i was doing a woocommerce tutorial i had a section where we had two buttons and one of the buttons should only show if maybe the product is a simple product but if it's a variable product we don't want that we didn't want that button to show and in a case like that if we use this kind of layout where these buttons are placed side by side if we give it a definite width um and then that button maybe we go to a page okay where the product is a variable product and we didn't want the other button to show now if that button doesn't show this one is going to be left hanging and it's not going to make for a good layout so um that is that is a one particular use case for this kind of layout approach and it's really flexible and it's really powerful so and because we're using the end child and we're not using the id okay so it means that every first child any first child so if we move this here you know it's going to be um this you know that setting is going to be applied to this if we if we move it this other way this setting is going to be applied to this so it makes sense okay so um and let's say we wanted to use uh we had three okay and then we didn't want to use that first child but we wanted to use the second child we want the second child to be a bit bigger than the other so maybe we wanted this to be 30 30 um 40 okay so one of the second child okay so we're gonna add um no not after we're gonna add nth child two okay and then we make that a minimum width of so we want this to be 30 30 then that that's going to make this 40. so we wanted that middle one to be a bit bigger okay so um and we had that so in this situation if we move this to the middle you see the middle one is always bigger it does not matter which one it is so using the nth child rather than using um the id for a use case for this kind of situation is a better approach let's save that now we're going to deal with um content being you know this shorter i believe everyone knows how to do that but for the sake of those who may not know one way we can make this um now when you have cards like this typically the ones with the most content you know will grow taller than the other so let me just do that and you're going to see it's going to grow taller one very common way of fixing this is just to go to the parent okay and then um just go to stretch and it's gonna stretch okay so that's a very easy fix now that applies to all the children of that you know that div now what if you wanted to just fix that with only one perhaps there's a situation where you wanted the middle one to just remain like that maybe you just wanted to deal with only one you could select that okay and then in this case you're probably better off using the id okay or if you wanted to use the nth child maybe you wanted it to apply to it all a specific you know child position let me say the third child okay you can still use that but since we already have an end child declaration let's just do that for the second child okay so i'm going to go to layout and then we're going to use what you call the the flexbox child controls where you have the align cell properties so we want to align we want it to stretch so you see the second child stretches now if we move this div now this is let me change the picture for this so that we let me change the picture for that um all right so so we're gonna see the difference now if you if we move this if we move this div to the second position she's gonna adapt you know that uh property okay so yeah so that is if you want to apply to just one so you use the flexbox child control so we we had that on the second child so let me take that out but in this case i'll just prefer to you know just stretch it okay okay what did i do to that second child i think i deleted that uh 40 40. all right okay so let's continue let's look at responsiveness okay now um so so far we have been using a hundred percent for this and what if we go down the breakpoint now it's not automatically responsive okay it's not automatically responsive so you can see uh what is happening here now what if we want to stack them up on top of each other at a certain break point now normally if you were using 33 33 33 okay what you'll do is that maybe when you get to a break point like this you're gonna select that particular card and change it back to a hundred percent so for it to start but in this case they are already at a hundred percent the cards are already at a hundred percent so let's let's make this a hundred percent okay so the cards are already at a hundred percent so what do we do in this case so what we do we simply go to the parent and just stack it vertically and that's all we stack it vertically and um notice that we had that um left right sibling thing okay that applied um [Music] that up let me take away this particular one so let's deal with one at a time i'm gonna remove this okay now we had that adjacent child you know um control where we had this this space okay now when we go to this breakpoint so we're gonna see that we still have that okay we still have that so um how do we resolve this let's go back to that code block okay so um we have um at this break point 767 okay uh 767 so we don't want these to apply so if i take this off completely you see this everything looks good you know everything is fixed it looks okay let me let me return that and darken the the section a bit more okay so the background of the section let me just make it a bit darker okay so you can see what is going on here it's gonna make it darker all right um so you can see what is going on here so let's go back to the code block okay and so if i take that off if i delete that now everything you know aligns but we need it because at the bigger break point we still need that space okay so i'm not going to delete it but rather now when we get to this breakpoint i don't want this to apply so what we're going to do to solve this is to wrap this in a media query okay so um so once we want to we want to apply these css at um a minimum width of 768 because what we have is 767 so i'm just gonna write a media query okay and i'm just going to say minimum width um 760 68 pixel okay so that's what i have there so i'm just going to take this copy the whole of that and put it in that media query all right so now we have these wrapped inside a media query and um and everything works well so if we go back here we still have that space uh what is going on here let's see here we have the space so why don't we have a space here a minimum width okay so yeah that should be the build i think you know see do we have anything on that card all right let's take a look at it on the front end and see how it looks i'm just going to save it and then open it in the front and all right so it's just going to view it um let's make it responsive here so yeah so from here we will lose that so i want to see why i'm losing that okay i i think um yeah there's this there's this problem that um [Music] there's this problem that you know oxygen has if you have certain type of you know pseudo element that you have used before okay and and after a while you don't see it anymore so i i must have had um an end child art somewhere in this document while i was working with these documents and that is what is affecting this okay so but if you take a look at this now let's go back you see it is um it still has to do with card it still has to do with the card class but if we go to the detail okay we can't find it here that we can't find the nth um child so uh so i'm just going to manually add it because it's still there so to remove that i'm going to manually add it now this is something that i added some time but while i was you know working on this document setting this document up and it wasn't showing anymore okay so as a result i didn't know it was still there so i'm gonna put it there and then i'm gonna um just put a value on it okay now to be able to delete it you have to put a value on it and then i'm going to oh sorry let me remove that that's a mistake i wrote zero instead of odd and child odd okay yeah i don't know my spelling anymore okay so i have the nth child odd so now so take a look at this so there are a couple of things it's showing up that there are values here okay so i'm just going to delete that nth child odd okay or take away those values because it's not giving me the option to delete it uh let me put a new value here and then go there now i can see it so that's that's um one of the box i've seen so second nth child properties i think if you put odd or even you know you're not going to see it so and if you don't remember that you had it you would never know that it is there unless you put it in again okay before you see it and once you get out of it you cannot see it anymore so that is um that is a bug in oxygen so let's uh now we've taken care of that let's take a look at the um let's take a look at this so i'm trying to figure out why i'm still having stuff here okay all right so the n sharp properties you know they they're kind of um i'm still having that issue here let me save this go back okay so let's see um have this yeah i still have that nth child odd wow okay let's do this i'm gonna add it okay i'm gonna add it again this time around i'm not just gonna delete it i'm gonna remove the values first so and child art now i decide i decided to leave this part of the video normally i would edit stuff like this out i mean maybe i think i should but i'm going to leave this part of the video okay even though i didn't add this odd in the course of this tutorial but i'm going to leave this because this is these are real life problems real life issues that you're going to be facing okay so i'm going to add this again so you see all those values are still there so i'm just going to take them out okay i'm just going to take out those values okay and uh and that's it and that's it or probably just delete that value okay uh for the odd class and child art stuff so let's see if we still have an issue so nope it's not there all right so that seems to be solved now take notes once i select the original and go back i can't even find that odd so um i do hope that the oxygen team will do something about this i've noticed this a couple of times so about um when you add that nth child custom state so let's uh let's continue let's take a look at this how it looks all right so that looks good all right so let's not forget to align this so the base all of them should be equal height okay i'm gonna save that refresh and yeah everything looks good so if we come here once we get to this breakpoint everything collapses of course we don't have our margin bottom okay to separate the cards so we're just gonna go back um let's go to that breakpoint now to have that space of course you could just go to that just a 10 pixel bottom now it is going to apply to the last element but um you could use the last child to remove it but if you don't care if it really doesn't have any impact on the design you could just leave it like that but if your perfectionist you could you know do that and i used the last child to remove it but then you could also use the code block okay the adjacent child and then give it a margin top all right so let's go here and see the code block and then now because we want that to apply from this here okay from 767 downwards i'm going to copy this media query and then i'm just going to change this to maximum width okay instead of minimum width and then maximum width off now what we have here was 768 so we're going to give this a maximum width of 767 okay and then we're going to change these to margin top okay all right so you can see that that works okay so um it applies a margin top to this to the last and the middle but not to this and we have a solution to that but then that doesn't apply from this breakpoint because we were using a media query let me save that refresh and there it is so that is one way of using flexbox layout controls now let's talk about the flexbox you know item order because this is one um one of the topics that a couple of people might find confusing especially because of the way it behaves now let's say we wanted this card okay um this particular the last one to be number two okay and then we of course you're going to do that on the id all right so when maybe you go to a particular breakpoint and maybe you said okay from this breakpoint i want this to be number two okay and then this this should be number three and then you select the id of that okay and uh or if you want to work with the end child no problem but let's use the id this time now you go to layout and then you go to order okay you want this to be two right and you put two nothing happens why why is it not moving to two all right let's let's make it one nothing happens so you wonder why isn't anything happening now let's take a look at the front end i'm gonna i'm gonna make it two and save it okay uh we are this nine and one breakpoint which is kind of like the ipad stuff okay now at this breakpoint let's take a look at that now you see the order is stupid it's not working why isn't it working so you have a situation like this and you're racking your brain you know why isn't this working now let's see how flexbox controls this stuff now let's go to compute it and then i'm gonna just search for order okay um okay now this is order two right but let's check this now um [Music] you can see that even though you didn't give these other ones order by default all the flexbox chart elements are given order of zero okay and because you're giving this two now zero takes priority over one one takes priority over twos and so on now because you have given this two but this is still zero okay because since this is two for this to be here and for these to move here this has to be three you understand what i'm saying so if you're giving these two and this is till zero this is still going to remain where it is because this ah in the right order so you have zero zero two but when the way zero zero zero they remain the way they are you get this even if you give this one it's not gonna move here because for it to move here that means this and this will have to be two and three and they will not be automatically applied okay because by default they are still zero so giving these two without giving these two now giving these the order of two without giving these these you know their own order it's not going to make this move this is going to remain where it is so that's why this is not moving let's go back to the styles now um so we've given these two but we want it to move to the second now for it to move to the second we need to give this one three okay so we're gonna select that one go to the id and give it an order of three you understand so it moves so yeah so since this is zero it really doesn't matter anymore because zero and uh zero is the first but if you gave this one it's still not gonna move to the first why because this is still zero zero has priority over um over over one okay so if you wanted to give this make this to be the first then this has to be the second so you see what i mean now so this is what you need to know when it comes to flexbox child control order positions so let's clear that all right so another thing i would like you to know is that the nth child you know giving it an order doesn't change now doesn't change the nth child position okay now for instance we have the adjacent child you know selector for these two now if i move this to three okay and then and this is let's say this is two and this is one okay now um you can see that this still has even though the adjacent child said when you have um when you have a sibling next to you okay now that has to do with the html structure okay not the css you know positions so you have to take note of that so you have to adjust your code accordingly if you're gonna be you know using this ordering okay i'm gonna quickly just take that out okay save so far we've done um flexbox layout with just one column okay what if we wanted to do something that has three maybe two columns okay um like something like this two columns but we want to we don't want to have two separate uh parents okay we want to have just one we just want to have one so what are we going to do um we've talked about using the nth child to control the spacing but there's a very simple way of doing that although something is going to give and we're going to look at that but it's very simple and then we're going to take a look at how to have two you know columns all right so i'm going to create i just want to do that with a new section and then i'm going to add a div um i'm going to call that the let's say card 4 give it a background of white and i'm just going to copy this inside that i'm going to give it a padding of 1m perhaps 2. and i'm going to just centralize the stuff okay so i have this um [Music] i have this card and i want it to be i want to give it i'm going to wrap it with a diff okay so i'm going to call this let's say um card parent 2 okay just give it a class now i'm going to duplicate this into six because i need six of them we want to have maybe the face column three the second column three so i'm just gonna do that uh one two three four five six now i'm gonna stack it horizontally now so we have this so how do we make it like this so you have maybe one third you know of the width of the parent for the face top and then the second the last set of columns one third each now um what we're going to do is we're going to use a technique uh we're going to if we if we set this card to let's say a hundred percent like we did before nothing is going to change okay nothing is going to change um if we set it to 23 and then we go to the parent and click allow multi-line that's going to work but we're still going to have the same problem that we are having when we come down here and set the parent to stack we want we have to go back in here to change it to a hundred percent which you know if you want to do is fine but how can we automate this such that um we don't this takes care of itself automatically okay so i'm gonna take that back so what we can do is to just go to the custom css for this and add a line of code uh we just call it flex 130 so now this what this means is flex one thirty percent means flags one one thirty percent which means which means flex growth let's grow one okay uh flex shrink one and flex bases one so that is the short form sorry did i say one thirty percent now that is the short form for for for this okay so uh so instead of writing flex growth flexuring conflicts basis we just shorten it to flex one now if you want this to be different you can write the full shortcut but this is the shortest shortcut so i'm gonna i'm gonna leave it at that okay so now we have them um three now i'm going to save it and go to the front end to check it out so this is it now let's go responsive um i'm going to just see what it's going to behave like so as it goes it um what happens i see it automatically you know collapses okay just by itself now what if we want to control at what width of this does it collapse okay so right now it's going very thin okay so if we look at um if we look at computed value this is going down to 173 pixel width you know it gets all up down up to 172 before it you know stacks horizontally but what if we wanted to stack while it is still at least say 240 okay maybe something like this before it collapses so we want it to start collapsing at this point what if we want that so all we need to do is just to go in and give it a minimum width of 240 pixel and then that is for the card and then when we refresh this so let's see that so it still goes um very narrow okay so let's change that to 280 all right i'm going to change that to 280 and refresh let's see 280 works so at once it gets to this point it breaks into two and then we go further before it breaks into one okay so that works so that is one way to do it and how about the guy now for this kind of situation it's gonna be very tricky using the same technique we used here because we only had three columns here sorry um one it was just one column here but here we have two columns so it's going to be very tricky we will do a lot of multiple media queries so we don't want to do that so one simple technique we're going to use is let's say we wanted to have a 20 pixel of spaces gap in between the flexbox item we will set um you know the the card margin to 10 pixel all that's just it and uh now i said something is gonna give when we do that okay now um to the the parents i mean the parent doesn't have any padding so it's basically zero okay so there's no padding now what the the downside of this is that this is not gonna line up with the page with and it's um it's a compromise that you can make okay if you don't mind so and this doesn't need any adjustments in the breakpoint it automatically you know adjust itself um and walks throughout all the breakpoints so so so that's just um that's just the way to do this okay so it's just a simple way but normally if you wanted to use do this kind of layout maybe you would prefer to use grid instead of flexbox but i just want to show you if you had to use flexbox for any reason this is what you can do okay so now um some people may be asking what on earth is flex basis now what flex basis mean is the flex basis property specifies the initial length of a flex item so it tells the flex item what length it should be let's say the width okay of the flex item so when we say flex basis of 30 we are saying start from 30 you can be bigger but your initial length is 30. so when we give it the initial length of or width of 30 it starts there now if the space is not enough okay it can shrink for instance when we come down here it's shrink speed it never shrinks below 30 percent of the width of the container so it cannot go below 30 percent but it can go bigger than 30 like when you have to here it is now 50 that's why you have two so so this is 50 of the width of the container okay and then when you get to this breakpoint this is now hundred percent of the width of the container but you're giving it the initial the initial width with the flex bases now what if we wanted it to be two you know 50 50 we're gonna give it um now if you give it 50 see what is going to happen it's going to take the whole why because there is no space for 50. why is there no space for 50 because we already have um spaces here so you have to account for those spaces so it wants to be 50 but there's no space for 50. so it pushes the other one down and takes 100 because it can't go below what you gave it because if it has to fit itself in here with this guy it has to be less than 50. you see so instead of giving it 50 to account for the space you can give it like 45 okay or 40 to be to be to be um on the safe side just give 40. it can't be um it's gonna take up all the available spaces now that's what the flex grow does and the the flex grow allows it to take up you know whatever space is available so it is important that you you know give it less than once there is a space just give it if you want it to be 50 just give it a little bit less okay because it can go um below this 40 and whatever space is remaining is going to fill up okay so now if we go here we're going to see take up that um whatever space is available then when we get here it breaks into one one okay um so so that's it so let's take it back to 30 so it takes up you know 30 and whatever space is available for it so that is what flex basis you know does now let's talk about sizing you know um like we're going to be talking about minimum width maximum width minimum height maximum height we're going to talk about different tips and tricks on how to and how to set sizes all right now the first thing i want to talk about is the use of viewport height all right let's quickly duplicate this section okay and i have a section here and i want to give it a background of let's just make it very dark blue okay all right just want to make it that dark i'm gonna save that and uh what i want is i want this section to be you know fill in the whole viewport so when i view it okay when i view it it's gonna be a hundred percent of the viewport height then i go and then i apply um okay height let's do it 100 100 viewport height and then i save it and everything looks great beautiful okay and then we happen to have maybe more content okay so um let's say i have more content so i duplicate that and save it so we've set our height to be a hundred percent okay i'm already laughing now look at what is happening now a lot of people have this issue where they have 100 viewport height and then they're like wait a minute my contents are overflowing and then to make matters worse in some cases it's not that obvious let's take this out and let me um find a way to take out some of the content here so for this for this second div i'm going to remove let's say the text okay and probably um i don't know i just want to make it smaller okay okay let me just reduce the sizes of these images okay so i'm just gonna do it on the okay that's not gonna work because all the cards is still gonna remain the same height because of this uh let's just undo that okay now i want a situation where um so let me take out sorry let me take this out completely now i want a situation so i'm going to just increase the the height okay all right i'm just going to increase that so now i want a situation where this looks this looks okay on this screen size yeah everything is perfect and then of course we have this hello head please ignore it now when i said i was going to use code block to write my css is it's only for the purpose of while i am working i'm not going to leave this code blog with the css for production okay i don't think it's advisable to do that so um if if i finish working i'm just going to copy everything out here to the style sheet and delete this so so don't mind that hello wall showing up there but let me just comment it out okay save this now everything looks great okay you have your 100 viewport head and you're happy about it now let's go responsive okay and uh you now someone has um a 14-inch laptop okay so views to view it and then and then this is the height of the laptop okay maybe uh something like that and then the person is complaining that the content is overflowing okay because you were viewing it on your large screen but when the guy with 13 inches laptop is looking at it or or it's on with an ipad turning it landscape is looking at it things don't look good okay things don't look good worst of all if someone with a phone is looking at it oh my god it's really terrible everything just goes really bad you kind of can't even tell what is going on here okay let's go responsive uh but that doesn't even show up i'm not quite sure why that is but all right see it doesn't it shows up probably um okay just the background that changed so why do we have a different background for that section okay from here i think okay i remember when we wanted to preview how this looks okay all right um so let's refresh that so now you look at it on the screen and only the first card shows up and the rest just overflows into other content in the body now that's because you're using you told this section to be a hundred percent uh viewport height okay uh so now we've seen the problem that that causes so if you want to have a section that is 100 viewport height never ever use 100 viewport height instead use a minimum height of okay that's that's the use a minimum height make it minimum height so what you're telling it is that it should never go smaller than a than 100 viewport height but it has the freedom to go bigger to accommodate the content so if we refresh this and then we go smaller so you can see whatever we do is grows to accommodate the content but it can never ever be smaller than 100 even if the content is smaller it cannot go below 100 viewport height it will always be a minimum of a 100 viewport height so this is the right way to do it so even if we view it on ipad you see it accommodates if we view it like this where the content is bigger than the viewport height it grows to accommodate so that is one sizing tip you should keep in mind and the second one i want to show you is what um the how you can use maximum width for a very useful layout okay now i'm going to take this out take this out okay um since i want to be working with this card class i'm just going to remove it because we already had a cartoon class i don't want to affect what i'm doing here already we we apply some weird um margins to this and it's affecting it so let's let me return that okay now we have the card too all right so i'm going to take off everything that we're doing here all right i'm going to take off the 100 and save that now what do we have a situation where i wanted this to be say only 400 pixels okay on the desktop but when we go to mobile i want it to be you know just um 100 it fits but i don't want to change stuff at different breakpoints i don't want to you know be doing breakpoint changes now how can i do that what i'm going to do here to make that happen is the best approach is to make it a 100 width but make it a maximum width okay of 400 pixel now you have 400 pixels here okay but as you go is 400 400 now when you get to you see what happens okay let's assume we wanted to make it um we want to make it like say 600 all right or we don't want it to feel all the way maybe we want it to be 700 maximum width on the desktop but we have already given it a width of 100 now what we are telling is this you have the freedom to be a hundred percent but never group has 700 pixel okay now so where it has enough space to grow more than 700 pixel is going to stop at 700 but once the space is smaller than 700 pixel it will automatically switch to the 100 width to fill whatever space is left so in this case we don't have to adjust anything so this can come in very useful in some situations so because if you wanted to make this 700 pixel okay now once you start getting to the lower breakpoint of course see it's going to grow more and give you that issue and then you have to come back here again to take it back and then you come here you know but with this approach okay when you have 100 and give it a maximum width of 700 that automatically takes care of the other breakpoints so you it saves you the trouble of multiple media you know query settings so that is one thing to um to to have in mind the use of maximum width it also very useful for a situation like this so let's say you just want to make this you know a bit shorter you don't want it to span all the way here and then you want to give it a maximum width of 300 okay and that takes care of itself when it goes to the lower break point okay because it's just scales accordingly and you're telling it look don't go beyond that at this break point so since it's already at this break point which is the biggest breakpoint i mean you're not going to have any problem so if it can go you can adjust and grow smaller as you can see here okay but at the larger breakpoint it remains 300 so now using maximum minimum width is very important now in what situation would you need to use minimum with now there are a couple of situations that could come in very very handy let's go back to the flexbox now um okay so let's see um how we can use the minimum width here all right so i selected this and we've been using the end child this time around i just want to use this okay the center um but for for something like this i think using the end child is still good because we always want any any div that is in the center any card that is in the center to have maybe a specific width so i'm still going to go with the card and i'm going to add that end child 2 okay so every time it has to apply now i want to set a minimum width of 50 percent okay now so what this does is any card that is in the center will always be a 50 minimum width now that takes care of you know the responsiveness automatically because at this at this breakpoint what you're having here is everything is 100 here so it really doesn't matter here maybe here it's it's um it's a little bit i think this is okay so let's go to the front end and check it out and uh so if we go responsive uh let's do it like that um let's put this at a hundred percent now if you go responsive and then go all the way down so you see at the appropriate breakpoints you know it's taxed horizontally so um but while it is three you want it to be at least 50 percent of the container so that is one way you can use a minimum width okay so you're saying don't go smaller than 50 but if you know if possible you can go bigger in as in this case so that is one use case for minimum width okay since we're talking about sizing okay um i think there's one extra thing that will be very useful so i'm going to i'm going to take off that minimum width from the card class okay i'm gonna take it off and let's look at something um i think this had too much of pixels so let's remove that okay now um let's talk about one important um or one cool tip let's say you want to have all your cards to be uh say square um i want to go to the card css and then add one line of css okay and i'm just gonna call it aspect ratio okay aspect ratio one now let's collapse that now the way this works is it tries as much as possible to make um your container or your card square as long as the content allows it so it's not very strict so if i take away let's say i take away all this now what is going to happen is it's going to make sure that your card becomes a perfect square so let me just take that away and you can see the difference once i put that aspect ratio it adjusts you know the the ratio of the width to the height to be one is to one okay so let me do this let me reduce this card image um so that we can have smaller image let's say 100 pixel okay let's do that and uh let's go back to the card now let me take away the aspect ratio one now normally this is what would happen to this card this is how it's going to be okay but if you wanted it to be square no matter what okay it's going to you know it's going to force the aspect ratio of one is to one and the only exception is if the content permits so if the content is small it's still going to stretch beyond beyond that so um let's assume that you want to put content in the middle you want this kind of you know layout where you have content in the middle and you always want it to be square so you could use this now even when you go to the lower break point you can see that it maintains that square one is to one ratio everywhere so that could come in handy in some situations i just wanted to point that out now let's talk about one other challenge that i see a lot of people have a problem with um especially people that are not very very familiar with css so i'm just gonna put let's say um some text here okay i'm gonna apply that class of card text card description okay i'm just gonna copy that you know just put there all right so we have this text and then i'm going to drop in a button all right okay um nothing too stylish just just a button i mean i just can't help myself i wanted to make it i want to make it stylish but okay just a button whoops all right and then i'm also going to um let me just call this uh card okay button and then i'm gonna just take that button and put it here all right so i have those buttons and i'm going to just put that and let's say we had more text here okay so i'm just going to copy lauren ipsum and just paste paste all right now for this i want it to align to the top okay so now we have this problem where uh we have unequal content and then we want our buttons all of them to align to the bottom now there's just two ways to do that two simple fix okay um and the third one is just a hack for instance if we go to space it's no it's going to spoil things the buttons might do as if that doesn't work if you go bottom this is going to move here so anyhow you do a space between it's just not going to work so so what you're going to do is the first thing is you can take the button and go to um size and spacing and change the margin top to auto and that is going to align it okay now another way you can do it is um you can select the second to the last element that's the second to the last okay and then you go to size to layout and then set the flex grow to one okay so that is going to push it all the way down to um to the same level those are the two ways you can use in aligning content to the bottom of you know the card so if you have a button like this you want them to align this is how to do it so that's it for this part in the next part we're going to take a look at css positioning and we're going to take a look at absolute positioning we're going to take a look at sticky position and their use cases and fixed position on their use cases and then we're going to introduce css variables and how important they are to positioning it is absolutely crazy how css variable can play a very big role in positioning so we're going to take a look at all that and we're going to take a look at the before and the after element and you know how to use it to you know to create the creative elements and all that the use cases and all so um so i'm gonna i'm gonna see you in the next lesson so i i hope you like this video and if you do please hit the like button subscribe and hit the notification bell so that you will not miss the next part okay so see you some other time have a great day

Channel: Design with Cracka

Views: 3,124

Keywords: Oxygen Builder, #Webdesign​, #PageBuilder​, #UIdesign, ​ #DesignSeries, Layout, Flexbox

Id: v7QCkNiwlzU

Length: 65min 36sec (3936 seconds)

Published: Mon Oct 18 2021