I found a way to never use Pixels again in Elementor

I've spent so much time in the container  and now I'm pretty sure that I understand   everything about it after all these months  doing tests and experiments but there was   this one thing that I couldn't really figure out  and that was making my design responsive even on   a desktop as I explained in my last grid video  you want your designs to be responsive on tablet   and mobile and then I propose that we should  work in pixels with these specific values in   the 1140 grid because on a desktop you want  a fixed width because otherwise the text will   become too wide so I was like let's just use  pixels and desktop and percentages on tablet   and mobile but there were some people that  said like hey Reno yeah but some people have   a smaller screen and then your design doesn't  really work so I thought yes they have a point   I want my designs to be fully responsive but  now I have finally found a way to use both a   fixed width for your main container on desktop  well also keeping it responsive when the screen   is smaller look at this it's fixed now and now  it becomes smaller and then it wraps perfectly   to tablet and mobile absolutely beautiful I'm  pretty proud that I now have found this and it   just works really nicely this also I think works  the same in bricks and in a webflow because they   also use the flexbox actually any tool that uses  the flag box it should work like this so for   people that have no experience in the container  yet the beginner friendly tutorials will come I   will release them when Elementor finally puts the  container out of beta and by default in the whole   plugin because right now they're still changing  it and I don't want my videos to be outdated   within a month so let's dive into it and let  me know if you spot any mistakes in my Approach okay so let's say that I want to create this  design it has two texts over here and then   three boxes or containers over here so here I  have a container for these two texts and I have   one container with three containers in it and  this container is set on by default on no wraps   it's not active but by default it's on no wrap  so if you add containers it will automatically   determine its width and that's what you want you  don't have to work with pixels at all because if   you know that your main container is on 1120  which Your Design also is then you know that   each container is 360 and that's exactly the same  as your design and this is all really nice but   what if you have two rows well then you could be  like okay let's just duplicate this section and   then we have two rows but then this creates  a problem on tablet because since the first   three one are in a container you get a gap over  here and that doesn't look very good so now you   need to work with wrapping you enable wrapping  by clicking on the container and then click   gone rap but now these containers if you don't  give them any whiff they will go to the max width   so here you have to determine how wide these  boxes should be and if two boxes both can fit   on one row then Elementor will do it but what  kind of numbers do you use here so here we could   use my template and just be like okay we want  three columns so 360 in pixels in width so you   go to your column you go to pixels 360 you copy  that to the other ones as you see perfectly and   now if you duplicate this one two times we have  six containers in one container and on tablets   you don't have the gaps anymore which is what you  want but as you can imagine with pixels it is not   responsive because from this point on it doesn't  really look that good and then it already wraps   over here even though we're not on tablet mode  yet because now we're on tablet modes you see so   this whole space that doesn't look very good so  let's say that you put this first container on   grow nothing happens but if you decrease its size  eyes it stays the same if you increase it a little   bit a bit and it becomes two columns as you can  see so what is going on here so let's start with   one container again so now this first container is  500 pixels wide and it's set on grow so it will be   at least 500 pixels and then it will grow so then  if we start to duplicate this now as you can see   it creates two boxes if we duplicate it again  this one will be 100 width but this first box   is a lot wider than 500 it's actually 550 which  is the exact width of just six columns on a 12   column grid and don't forget that Elementor also  calculates the space in between over here in order   to decide if it reaches the 100 so let's say that  we put this one on 50 what would happen then 50   because that makes a lot of sense it still wraps  that doesn't make any sense but that is because 50   plus 50 plus the 20 pixels in between is more than  100 and then it will grow to the end so if you put   this at a little bit lower let's say 45 and this  one also on 45 then these two will be 550 so they   are not actually 45 percent they are 45 plus what  they can grow in this one row but since 45 plus   45 is 90 and 20 pixels in between is not the 10  left in this whole box that means that we haven't   reached the 100 and therefore two boxes will stay  on one row I hope that this makes sense so I did a   lot of calculations and I tried to make a whole  grid so let me explain what's going on here so   let's say that we want a three column layout or  a tree container layout like this and you want   it to wrap right so why did I use 25 here well 25  is the minimum number you can use in order to get   three columns why 25 times 4 is going to be 100  so 25 times 3 plus the spacing between which is in   this container just a default 20 pixels will not  fit four boxes because 25 times 4 plus the space   is not possible so that's why you actually need  to use 25 in order to get a three column layout   I hope that that makes sense let's go to another  example this one 50 doesn't work because 50 plus   50 plus space in between is more than 100 which  is what I just showed you so why this number well   what is 100 divided by 3 it's 33.33 so that's why  the minimum number you can use is 33.3 so to make   it easy I've just used 35. so why did I go on the  lower end right why not go with 45 over here well   that is because of that space that you need when  the screen is smaller because if you would work   in pixels here then at some point then it would  probably break and with these numbers this seems   to work fine and on tablet and mobile you're  working with percentages anyways so working with   percentages and never having to touch pixels again  in Elementor is kind of great you know oh and the   third reason is that these numbers are just easy  to remember right 35 25 20. and here on tablet it   says 25 because on a tablet six columns is way too  much on a tablet you want at some point you want   three I think from six to three that makes sense  so this layout with three columns should be 25   in the same way as three columns on a desktop is  25 right because 4 times 25 plus Gap cannot occur   therefore it becomes three so at some point you  will have these numbers just in your mind then   it becomes really easy two columns is always 35.  three columns is always 25. four columns is always   20. it's so easy I'm so happy with this so let me  show you the settings so this container is on 11   20 because that's what I explained in my last grid  video the actual width of the content in the 1140   grid is 1120 it doesn't stretch to ld1140 with so  my main container is on 1120 but everything is on   percentages so at some point it will able skill  so let's just go to uh for example the laptop   over here I've added some extra breakpoints which  you can manage over here so here it's still the   same values on tablets in landscape mode as well  then when you go to the tablet in portrait mode   this will become 100 on desktop this layout let's  just go back one step was three columns so in most   cases you want two columns on a tablet this one  becomes 35 because again 35 will always create two   columns and so on three columns always 25 as you  can see it's so easy to implement and this part on   desktop was six containers next to each other so  that means that the content is small so maybe you   could fit two on a mobile phone so that's why I've  used 35 over here and even for the people that do   not not agree with me and say that I shouldn't  pick the 1140 grip because on bigger screens   um that's not good you want everything scalable  well what's great about this trick is that this   also works with percentages so you can  change this whole layout to let's say 80   percent and then it still works because  let's just test it gonna click update   see because all of the inside containers have  percentages and now the outside box container   has that as well so even if you would like your  whole website to be stretched because with some   designs that's kind of cool you can use these  numbers as well and I've even tested this on a   super big 4K screen as you can see and these  numbers that you see over here work on a big   screen like that as well but like I've said  for most websites I don't use that I just use   the default fix with because otherwise the text  box just become too wide and then people have to   read like this most people don't like that and I  think that's why Elementor also just gives us the   1140 grit as default because that's best for most  websites so okay now we have covered the wrapping   with grow which is kind of awesome but you have  to understand that these numbers only work when   all of the boxes in the row are the same size  because they all grow with the same rate that   is how the grow feature works but if you have  something like this where this first part takes   up five columns and then this one takes up seven  then these numbers don't work so if you scroll   down on this page you can see this part by the  way if you want this whole page as a download I   can give it to you if you want to so you can see  it for yourself how it works and maybe even copy   and paste things to your own projects you can get  this whole page template by going to The Landings   page and then I will send it to you via email  but if you already want to use it now make sure   that the container is activated on your website  which you can do in the settings so let's go back   to my design so this part is five columns wide  and then this one is seven columns wide okay so   here we have that layout how did I calculate  this number well this is very simple a five   column element in the 1140 grid is 455 pixels  wide divide that by 1120 and here you have it 40.63 that's why you see this number over here  again we want to use percentages not pixels so   let me show you how this works I'm going to copy  this so here I have a similar layout there's one   container this container is on row this widget has  no width and this widget has no width and this one   is super wide because there's a lot of content in  it and this one is just as wide as much space as   it needs as you can see so now you can go to the  advanced tab go to the with go to custom and paste   that number so now it should break at the same  word as in our design file as you can see that   is how that works this is 455 in width let's  calculate that it's not four five five so what   is happening here well we have to put an element  next to it so let's just put this one as explained   in my guide here it should say grow so let's  put that one on grow but then it also doesn't   change and why is that well well the grow feature  only works if the element has some minimum width   so let's just try that I want to give it some  sum with at least something so let's say just   one percent right so now that doesn't really work  because this element which is 40 plus one percent   is not enough because this element is 25 so that  means that the container will try to stick it on   one row so we need to make this wider because  again it will take the minimum as you can see   and then at the first percentage or first pixel  that it doesn't fit anymore in the uh 100 it will   grow so here we will need at least this one and  for this element let's see if it's now the size   that we want which should be four five five it's  still not the same size because you need to use   this feature and this feature says it will be  45 no matter what happens because the flexbox is   flexible so it will try to keep all the elements  flexible but if you enable this option then it   will keep this size no matter what and now let's  see if it's if it's the right size it's still   not the right size and that is because our main  container is still on 1140 because I haven't set   it up on this website so let's just put it on  1120 and let's now calculate it again and now   it's four five five so now we have the exact same  design over here as in our design but of course   these percentages are based on the 1140 grid so  let's say that you want to create a website with   the 1260 grid a little bit wider then you need  to use other numbers which you can calculate   by just dividing this number with 1230 but I I  like to stick to the 1140 grid and then maybe   only change the gutter increase that but since  we're working with percentages that also works   right so it doesn't change when the gutter changes  so you can use these numbers let me show you over   here if you would increase this to 30 it still  works it's it's just awesome so the only thing   that isn't that pretty is this part but I think  that this is the closest to Perfection at least   from what I understand and I've already spent so  much time in the container if you think that I can   do this part better let me know or maybe I've even  made a mistake take over here also let me know but   if you guys also think that this is the perfect  way to work then I can create tutorials about it   and I will create Frameworks I can include that in  the course because I'm gonna launch an Elementor   Pro course soon which I'm super excited about so  yeah that's it the final piece to understanding   the container for me and you could say that  I made some mistakes with this approach but   there's one thing you can say and that is  that I'm not well prepared for the container   okay guys thanks for watching I hope that you  liked this super super in-depth hardcore video   that's at least how I see it I know it's  not beginner friendly but hey not every   video can be for beginners right thank you for  watching let me know what you think down below [Music]   foreign [Music]

Channel: Rino - LivingWithPixels

Views: 51,259

Keywords: livingwithpixels, living with pixels, elementor grid, elementor percentage, elementor box container, elementor container, elementor pixels, elementor px, elementor %, livingwithpixels grid, livingwithpixels pixels

Id: 9jhWNLgrYv0

Length: 15min 7sec (907 seconds)

Published: Fri Dec 09 2022