Is this the perfect way to work with Elementor's container when you want to make your designs pixel perfect? I think I got something interesting here. Let me know if you have any feedback for my new system so that I can implement any improvements in the Elementor Pro course. Btw, you can download the template here: living-with-pixels.ck.page/ea81ccad85
Well done Rino! Now you have to change you business name to Living with Percentages! --And now it's time to learn REM instead of pixels for font sizes. :)
@@imlivid2746 yeah it is REALLY good working with REM because browsers respond well with REM. When you use REM, for example if someone has eyesight problem and they go to their browser settings and edit the default browser font size, your website will respond to that. If the fonts are in px it will not respond to that adjustment. Then again if you have set the default font sizes of your desktop, tablet and mobile to be in different percentage sizes, then when building and use REMs, the responsiveness on text will be automatic across your website. This does not work with pixels because you have to set it everywhere to make it responsive.
Responsive design is one of the most important skills a web developer can have but also complecated! Please create more videos like this about responsiveness using elementor. Thank you for this video!
This concept covers at least 90% of use cases and is still flexible enough to adapt. Thanks for taking a complex concept and making it simple enough for this old rock to understand!
the reason the layout breaks is because flexbox doesn't take gap into account it doesn't subtract it from 100% width... and by default the gap is set at 20px... so for example a 3 column layout with a 20px gap is: 33.33% plus 20px gap + 33.33% + 20px gap + 33.33% so its almost 100% width plus 40px gap... and because elementor doesn't allow you to use calc in the width field you can't subtract the gap... the best solution i have found is to use a plugin which allows you to use calc in the width field... then on each container within the parent container you can set each width to: calc(33.33% - 40px) and it will work perfectly... then on tablet if you want a 2 column layout you can use: calc(50% - 20px) and 1 column on mobile just set it to: calc(100%)... if you use different a different gap amount you can just adjust that in the calc.. hope that makes sense... i have not tested out your method but if you alter the gap to like 10px for example does it still work?
Yea, that’s what I explained right? Or am I missing something? Nevertheless with these numbers you can just change the gap and it will still work! I have tested this from 12px to 30px in the 1140 grid (most websites stay within this range) and it still works. So this is even less work I believe because you can change the same % from 12px to 30px of gap.
@@rinodeboer oh yes nothing wrong with your explanation and i have tested your template and it works all fine which is great but i was just suggesting another solution... i think what this really highlights though is how bad flexbox is for structural layout, css grid is so much better and easier and will allow for much more complex layouts... flex is great for content layout though... i don't imagine we are going to get css grid anytime soon in elementor 😂
I just did something similar today. I found that if you remove the "Gap between elements" and you set the main container to "Wrap" you can use the right % (like 50%, 33.3333%, 20% etc) since all containers already have a 10px padding around them it leaves a nice spacing. That is how Elementor does it by default when you add a new container with multiple columns.
@@integrateur You will be still using Flexbox when you custom code. I can code but I choose not to because clients want editable sites. I ditched Elementor for bricks though.
Hey Reno, when Elementor release it properly and you finaly do the full Container tutorial, it would be brilliant if you could base it on the Hello theme. Ferdy has done a great 4 hour tutorial but it's based on Blocksy (he's got to feed the family!) and we'd like to stick with Hello as we use it a lot. Keep up the great work!
Great vid Rino.... Most of us love designing for desktop - but then want to cry when we have to deal with mobile optimization. Elementor or someone should make an AI based site optimization calculator tool plugin that allows you to auto-optimize your entire site (based upon your selected inputs) for the ultimate optimization experience. (how you want certain sections to be - PX/%/REM/EM/VH etc etc. Would be a massive time-saver to have a tool to put in all settings/inputs to test on 1 section at a time on elements like main container, sub-containers, width, height, margins, paddings, typography (REM/EM/PX), etc etc so you can see what the section looks like as it scales up/down. Once those settings are right for your "test" section - you could then apply to rest of site to yield a similar effect without having to manually adjust every, single element - which is a painstaking process for anyone who's ever tried to design a custom site.
Great video! I’m hoping Elementor can somehow add CSS grid inside the designer grid and give the ability to use all unit sizes like REM, EM, CH on every element like Webflow does and give us more creative control over the container because I pride myself on being consistent while saving time and I dig Elementor 😭
The problem I personally found with using grids, is that my work ended up looking too corporate even when I was doing work for clients who wanted things to look'funky'. Learn this and then forget it and pull it out when you need it.
I love this concept. When Elementor goes live with the flexbox I would love to see you do a more in-depth how to video of this for us advanced amateurs.. =)
As always your videos help to understand the enormity of website design for us novices. One question though. I noticed @ about the 11:35 mark you figure out the width of a container in Elementor. What did you do to display that measurement? Thanks for taking the time to produce these videos.
He's using the screen shot function. Press Shift+Command+4. Click and drag the crosshair and you'll see values around it. Once you let go of the click, your computer will take a screen shot of what's in the box you dragged out. To stop this just hit the esc button before letting go of your mouse and the crosshair will disappear. This is on Mac, I'm not sure how you do it on Windows.
You're a genius! I was so confused and I was also playing around with percentages and couldn't quite wrap my head around it but was getting around to this I think
Have just moved back to Elementor from another Block Builder for latest site to simplify layouts - hadn't thought of using the grow setting to simplify percentages👍
Hi Rino and thanks for those suggestions and explanations. I'm just confused (my fault) on where I should set the 1120 instead of 1140. Probably this is a stupid question but should I change it on Site Layout Setup to apply to the whole site automatically? Or, can I leave the 1140 on Site Layout Setup and put 1120 on each Container I need to align?
5:20 Holy crap, I'm trying to keep up with your explanation and am getting confused...I can't imagine saying all that, and that quickly, in a language that's not one's first language, like you do!! Well done!
Hi Rhino I'm using grids for this kind of layouts (utility classes). But still I'm very curious how you prevent the last item in the list to become 100% width. I watched the total video a few time but can't figure out how you did that.
Is this still relevant with newer Elementor updates usingt the flexbox? Its very frustrating as I am following along but around @2:50 when you make the container a set size my results do not match what I am seeing in this example.
Hi @rinodeboer, Thanks for the detailed video explaining everything that someone should know about using px/percentage. I have a 4 column layout on desktop. I wish it to break 2*2 for tablet. But When I set the width for tablet 35% it makes each column 35% but does not break to 2*2. It still displays 4 columns in a row. What mistake I am making? Please pardon my ignorance, using Elementor for the first time.
Thanks a lot, I have been trying to figure out why the 50% cause the flex items to wrap within the parent but you have explained it perfectly. Thanks a lot
Remarkable tutorial! Thanks for sharing your findings and your excitement! One of the areas closely tied seems to be image sizes such as for headers. I didn't see any videos addressing this; have you done any? How do image sizes need to tie into containers?
Then your website is still in the sections and columns. Make sure to go to the Elementor settings via WordPress and make sure ‘Flexbox container’ is turned on.
Fantastic work. Just a few thoughts after spending time with your amazing template: I have a layout that consists of 6 boxes in total: 2 boxes of 35% in the first row, and directly below them 4 boxes of 20% each on the second row. This causes an issue where the second 35% box shrinks to allow space for one 20% to its right, so I have 3x3 boxes instead of the 2x4 that I need. This doesn't occur when you put something of 100% width between the two rows though. Also, the dividers in your template aren't set to 100%, so the layout breaks, creating uneven looking boxes. I might very well be missing something, but I thought you should know. But great work, thank you for your generosity.
Can anyone please explain why Rino says we still need to set width to 1120 when using percentages? Surely it doesn't matter as we're no longer trying to avoid pixel decimal points.
Really good explanation of the Flexbox and Elementor's implementation of it, thanks Rino. Can you share the settings you have for the additional breakpoints please? I have 2 customers who always say that the layouts don't work so well in landscape on their mobiles
I just did the elementor questionaire yesterday and in it they ask about improvements . I suggested a breakpoint set up in which the entire site will adjust to adjustable breakpoints according to set paramentors given by site designer . I have been having a terrible time trying to get a site of mine to change sizing cleanly but is due more to the background images on desktop. When dropping down to tablet they are ok but once reaching mobile sizing they really wig out . I can't delete them in tablet or mobile because they are then deleted in desktop . I am using same image twice on home page once as background . then again as background overlay which looks good but gets worse as sizing is reduced .
If it's too hard to figure out, it's never the worst to just duplicate the entire container/section, do responsive settings to hide the mobile version on desktop/tablet and vice versa, so you can perfect your mobile experience.
Hey Rino. Great video as always. I also played with these types of layouts and came to the same conclusions with Flexbox. I ended up creating utility classes for CSS Grid instead. Grid is so much easier to predict and manage for layouts. Elementor and Bricks don't yet have a UI for Grid, but it is easy enough to add utility classes for this and override as needed. Let me know if you want me to do and share a quick video showing how to do this.
@@steala Hey Kalpesh, :) I have reached out to Rino. I won't post a link here, I think it is bad manners to post video links on other people's channels. I'll let Rino decide what to do with that.
Could you please clarify your your boxed page width. In other videos you mentioned the 1140px width is not ideal. But I also see graphics outlining a total boxed width of 1140px with 10px gutters on the right and left, bring the useable space down to the easily gridable number of 1120px. But I also thought I read that you suggest changing the total boxed with in Global settings to 1120px. Could you please clarify if the width field of the content main content area should be globally set to 1140px or 1120px?
Globally it's better to set it to 1120, so that you don't have to mess with 10px left and right when you leave it at 1140. So the content area then becomes 1120.
Thanks for this, I now know what grow is for. Have you considered not using those inner containers? How about one container and set it's elements to the desired percentage widths? Doesn't all those extra containers add to the bloat?
Awesome! Well, that’s not possible when you have multiple items in each container. In some situations you can get away with widgets, but a lot of times you also don’t. And sometimes containers with widgets create less code than widgets with all kinds of features, since some widgets have lots of functionality which you don’t need.
@@rinodeboer Agreed. If you have simple elements in a row then, yes only one container works. And... I did a quick test of using three inner containers and without. I could not see any change (or very little) in the html load. Not quite sure how Elementor achieved this but good on them!
Yes, most of the other builders are not production ready in terms of features. For smaller websites there will be competitors. But Elementor is so big that it will take quite some time for another builder to get big. Also, the other builders don't have that much budget to market. It's not only the product that sells I believe. But I actually have an interview planned with the CPO of Elementor where I will be diving into their future, because I also want to get more answers.
@@rinodeboer I think Elementor will remain for a long time, but I think Elementor will fit into a niche more for beginners and advanced users. So for people who won't code themselves will stick to Elementor and I think this is the target group Elementor aims for. Bricks and Oxygen aim for professional developers, and these builders will be always ahead of Elementor in their possibilities. Of course, that's my personal opinion as a web developer with almost 20 years of experience🙂
Thanks for your video. I really appreciate your clear and smart explanation of this container concept and percentages etc. (I downloaded your template but I got an error in Elementor (Pro) saying "Invalid File" when trying to import it as a template.)
did any of you try this method recently ? i tried to apply this on a current project and it does not work pretty sure i follow every step, the container is 1120 and so on... when i tried using 50% for 2 columns and 33% for 3 columns it worked!! i think we no longer have to calculate the gap in between, Elementor maybe does it itself, can anyone confirm or deny this statement please ?
Thank you. I have tried that, but it doesn’t really work because when things wrap then it needs to understand what the % is on a vertical level, and since there is no end to a containers height Elementor doesn’t know what to do, creating problems. You can try it then you’ll probably see what I mean. So thats why its better to leave the containers flexible and the gaps on pixels.
Great vid! "Slightly" off topic: My nr.1 challenge now are: What are some of the best ways to display long texts (of course also mobile and tablet friendly!)... For example long-ish intro texts, even on the front page. PS: Thrilled to buy courses from you, too. Please include at least three "hacks"/ tricks/ ideas for long text sections in your course! -thanks
I've added the extra breakpoints but the default numbers looks different than the one I see in the video. Were the breakpoints values changed ? is there the list of value somewhere ? Thanks
You introduced me to Bricks through your video about Black Friday deals. I think it’s a million times better, at the very least in potential, than Elementor. I would like to see your opinion and overview of it! Elementor is barely getting flexbox and Bricks already has it with Grid on the way. It also lets you easily choose which format to use (px,rem,vw,etc) and can even implement CSS calculations. It’s easily replaced 6 plugins for me.
@@rinodeboer I know it's different for every project and some features are now new or in beta on Elementor, but I was able to remove all of Crocoblock but I kept Jet Engine, which is compatible with Bricks. But off the top of my head just with Croco I was able to reduce plugins for tabs and sliders and possibly others I'm not quite familiar with which plugin has which features I use. I was also able to remove Ele Custom Skin and a performance plugin. I know loop is now in Elementor, but I haven't experimented with its integration. I hear it's not too robust. The latest update for Bricks just added interactions, which is awesome - less JavaScript writing now. I think it would be cool to see your take on this since you're far more familiar with Elementor than I probably am.
Thanks so much for the great advice and the templates, Rino! Really appreciate the time and effort you invested in learning about the container behaviour 😉 I just started to get to know the container system and need some input: I created 2 horizontal containers with the exact same settings. I added text widgets to both, also with the exact same settings. Breakpoints are set by Elementor but when I drag the desktop window (viewport) to reach the tablet breakpoint the text alignment/text on desktop changes all the way with every minor decrease in VW. In other words, the text block does not stay the same, it changes constantly until it reaches the next breakpoint and then snaps to those settings. Are there any specific settings I have missed to keep the text block fixed until it reaches the next breakpoint?
Amazing Video Rino! This layout only works for equal containers/elements in a row beneath each other right? If for example you have four elements in a row and then add a fifth element (f.e. for blog post or loop items) the grow functionality gives a wrapping element a growing widht and the items aren't the same size anymore. How can you provide that?
Yea, you are right. But that situation that you first described doesn’t occur that easily because with 5 containers its much better to do a row with 3, then a row with 2 and then an empty container.
Hi Rino, excellent content as usual. I just have a question about those rules: as I'm following your channel, are those rules "compatible" with one of your latest video, i.e. Easily Manage your Container Width from here in Elementor released about 1 month ago?
Hello Rino! I don't know if you've come across this dilemma at some point... because it's exclusively for Windows. How do you deal with the 125% zoom that Windows brings by default? It has happened to me that website designs end up looking much bigger on the screen than they really are because of that damn client-side zoom. By the way, excellent as always the information you give us!
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
Is this the perfect way to work with Elementor's container when you want to make your designs pixel perfect? I think I got something interesting here. Let me know if you have any feedback for my new system so that I can implement any improvements in the Elementor Pro course. Btw, you can download the template here: living-with-pixels.ck.page/ea81ccad85
i downloaded the file, but it shows 2 jason file only
@@exterminatic So? You need to import either one or both into Elementor, in there you will find the containers with this layouts.
@@uncodedlife Apologies for confusion, I am new to elementor, where do i need to import the files.
@@exterminatic on every random page. There is a red plus or the folder icon next to it. That is where to import the template.
@@uncodedlife I downloaded the file and trying to import. I keep getting invalid file.
Well done Rino! Now you have to change you business name to Living with Percentages! --And now it's time to learn REM instead of pixels for font sizes. :)
Hey, is it really that good working with REM instead of pixels for font sizes? I have heard that its better but is it really that good in comparaison?
@@imlivid2746 yeah it is REALLY good working with REM because browsers respond well with REM. When you use REM, for example if someone has eyesight problem and they go to their browser settings and edit the default browser font size, your website will respond to that. If the fonts are in px it will not respond to that adjustment.
Then again if you have set the default font sizes of your desktop, tablet and mobile to be in different percentage sizes, then when building and use REMs, the responsiveness on text will be automatic across your website. This does not work with pixels because you have to set it everywhere to make it responsive.
Best comment of the day XD
Living with Fractional Units!
😄
Responsive design is one of the most important skills a web developer can have but also complecated! Please create more videos like this about responsiveness using elementor. Thank you for this video!
This concept covers at least 90% of use cases and is still flexible enough to adapt. Thanks for taking a complex concept and making it simple enough for this old rock to understand!
Glad it was helpful!
the reason the layout breaks is because flexbox doesn't take gap into account it doesn't subtract it from 100% width... and by default the gap is set at 20px... so for example a 3 column layout with a 20px gap is: 33.33% plus 20px gap + 33.33% + 20px gap + 33.33% so its almost 100% width plus 40px gap... and because elementor doesn't allow you to use calc in the width field you can't subtract the gap... the best solution i have found is to use a plugin which allows you to use calc in the width field... then on each container within the parent container you can set each width to: calc(33.33% - 40px) and it will work perfectly... then on tablet if you want a 2 column layout you can use: calc(50% - 20px) and 1 column on mobile just set it to: calc(100%)... if you use different a different gap amount you can just adjust that in the calc.. hope that makes sense... i have not tested out your method but if you alter the gap to like 10px for example does it still work?
Yea, that’s what I explained right? Or am I missing something? Nevertheless with these numbers you can just change the gap and it will still work! I have tested this from 12px to 30px in the 1140 grid (most websites stay within this range) and it still works. So this is even less work I believe because you can change the same % from 12px to 30px of gap.
@@rinodeboer oh yes nothing wrong with your explanation and i have tested your template and it works all fine which is great but i was just suggesting another solution... i think what this really highlights though is how bad flexbox is for structural layout, css grid is so much better and easier and will allow for much more complex layouts... flex is great for content layout though... i don't imagine we are going to get css grid anytime soon in elementor 😂
Ahh yea, I see. Let's hope that the CSS grid will come soon.
You can now use custom units as of 3.10. I'm currently using calc to solve this problem.
I just did something similar today. I found that if you remove the "Gap between elements" and you set the main container to "Wrap" you can use the right % (like 50%, 33.3333%, 20% etc) since all containers already have a 10px padding around them it leaves a nice spacing. That is how Elementor does it by default when you add a new container with multiple columns.
That is not really correct way how to take advantage of the container.
@@jcwebtech the correct way is to code custom themes and not use Elementor haha
@@integrateur You will be still using Flexbox when you custom code. I can code but I choose not to because clients want editable sites. I ditched Elementor for bricks though.
@@jcwebtech I know, I use Bootstrap 4 for the grid but there's less annoyings paddings/margins than Elementor to take into consideration :)
Hey Reno, when Elementor release it properly and you finaly do the full Container tutorial, it would be brilliant if you could base it on the Hello theme. Ferdy has done a great 4 hour tutorial but it's based on Blocksy (he's got to feed the family!) and we'd like to stick with Hello as we use it a lot. Keep up the great work!
agreed
I tried to download the template - never received the email
Same. Is the download still available?
Thank you so much! You save my life! Love the way you say containersh, numbersh, dollarsh....
Happy to help! Haha and sorry for my accent
True, I find it funny 😂
Thank you for sharing this.
The part I like most is you showing the Figma design as well.
Well done 👍
Great vid Rino.... Most of us love designing for desktop - but then want to cry when we have to deal with mobile optimization. Elementor or someone should make an AI based site optimization calculator tool plugin that allows you to auto-optimize your entire site (based upon your selected inputs) for the ultimate optimization experience. (how you want certain sections to be - PX/%/REM/EM/VH etc etc. Would be a massive time-saver to have a tool to put in all settings/inputs to test on 1 section at a time on elements like main container, sub-containers, width, height, margins, paddings, typography (REM/EM/PX), etc etc so you can see what the section looks like as it scales up/down. Once those settings are right for your "test" section - you could then apply to rest of site to yield a similar effect without having to manually adjust every, single element - which is a painstaking process for anyone who's ever tried to design a custom site.
Hi Rino, great video as always! But, i always wondering the extension you use to measure pixel by dragging the cursor at 2:19 . Thank You!
I would love to know as well
Looks like osx screen capture feature crosshairs
I use an extension named "measure it". Does the job
I am so stoked for this functionality! As always, you explain tings in a very clear way. Looking forward to more videos about this! Cheers.
Great video! I’m hoping Elementor can somehow add CSS grid inside the designer grid and give the ability to use all unit sizes like REM, EM, CH on every element like Webflow does and give us more creative control over the container because I pride myself on being consistent while saving time and I dig Elementor 😭
The problem I personally found with using grids, is that my work ended up looking too corporate even when I was doing work for clients who wanted things to look'funky'. Learn this and then forget it and pull it out when you need it.
I don't know what I would do without your videos!! Thank you!!
I love this concept. When Elementor goes live with the flexbox I would love to see you do a more in-depth how to video of this for us advanced amateurs.. =)
Rino de Boer! I love your work. You are more than amazing! I will enroll your course for sure.
what is tool for measure width ?
As always your videos help to understand the enormity of website design for us novices. One question though. I noticed @ about the 11:35 mark you figure out the width of a container in Elementor. What did you do to display that measurement? Thanks for taking the time to produce these videos.
He's using the screen shot function. Press Shift+Command+4. Click and drag the crosshair and you'll see values around it. Once you let go of the click, your computer will take a screen shot of what's in the box you dragged out. To stop this just hit the esc button before letting go of your mouse and the crosshair will disappear. This is on Mac, I'm not sure how you do it on Windows.
i just want to say -thank you Rino, for all your excellent content. You are a true master at your craft.
This content should cost money. This is gold.
You're a genius! I was so confused and I was also playing around with percentages and couldn't quite wrap my head around it but was getting around to this I think
i understand so many things all at once. it was a several lightbulb moment in my head. thank you very much
Have just moved back to Elementor from another Block Builder for latest site to simplify layouts - hadn't thought of using the grow setting to simplify percentages👍
Absolutely BRILLIANT! Great idea - thank you! Looking forward to your upcoming Elementor Container video tutorials.
I signed up to download the template and used 3 different emails but no reply from your form
Is there somewhere else I can get the template
Watching it again, still the most useful and in-depth explanation!!! You saved my bacon!!!
We work so much with it and always discover something new! Thanks for sharing and your perspective, Reno! Keep on! ✌😊
Very cool, Reno! Thank you for putting in all your time on this and making it easy for the rest of us.
This is just amazing, thank you so much for putting up quality content like this!
Hi Rino and thanks for those suggestions and explanations. I'm just confused (my fault) on where I should set the 1120 instead of 1140. Probably this is a stupid question but should I change it on Site Layout Setup to apply to the whole site automatically? Or, can I leave the 1140 on Site Layout Setup and put 1120 on each Container I need to align?
5:20 Holy crap, I'm trying to keep up with your explanation and am getting confused...I can't imagine saying all that, and that quickly, in a language that's not one's first language, like you do!! Well done!
Hi Rhino I'm using grids for this kind of layouts (utility classes). But still I'm very curious how you prevent the last item in the list to become 100% width. I watched the total video a few time but can't figure out how you did that.
just spent a bunch of time on containers and this is awesome!
Love love love this! thank you for sharing! look forward to you tutorial when container are made official in Elementor!
Thanks Rino! Could you please post the Breakpoints for all these Devices?
You are in good luck because the next video is exactly about this. I will show you how you can even add extra breakpoints.
Very nice. I appreciate your attention to details and clear explanations. Well done!
Hi Rino, Very well explained. I thoroughly enjoy your video., Can't wait to see your full container video.
This is great Rino
I've been experimenting with that a lot as well and this really also works well for me and my websites. Thanks a lot!
Is this still relevant with newer Elementor updates usingt the flexbox? Its very frustrating as I am following along but around @2:50 when you make the container a set size my results do not match what I am seeing in this example.
i couldn't get free Elementor flex grow container template to my email !?
you can use css for the box size problem, box-sizing: border-box;
Hi @rinodeboer, Thanks for the detailed video explaining everything that someone should know about using px/percentage. I have a 4 column layout on desktop. I wish it to break 2*2 for tablet. But When I set the width for tablet 35% it makes each column 35% but does not break to 2*2. It still displays 4 columns in a row. What mistake I am making? Please pardon my ignorance, using Elementor for the first time.
Thanks a lot, I have been trying to figure out why the 50% cause the flex items to wrap within the parent but you have explained it perfectly. Thanks a lot
Magician Rino! I was watching and trying to get knowledge about px,em,% videos in yt, now got in fav channel!
Great tutorial! Thanks for the sharing!
I am so excited to start using bricks and will use this there and in my current project in elementor
Thanks very much. Really shows how much effort you have Bern put to make this video.
Remarkable tutorial! Thanks for sharing your findings and your excitement!
One of the areas closely tied seems to be image sizes such as for headers. I didn't see any videos addressing this; have you done any? How do image sizes need to tie into containers?
I can't seem to find the "Grow" option in the latest version. 😩
Then your website is still in the sections and columns. Make sure to go to the Elementor settings via WordPress and make sure ‘Flexbox container’ is turned on.
Thanks. The science of flex container. Very complex.
Fantastic work. Just a few thoughts after spending time with your amazing template:
I have a layout that consists of 6 boxes in total: 2 boxes of 35% in the first row, and directly below them 4 boxes of 20% each on the second row. This causes an issue where the second 35% box shrinks to allow space for one 20% to its right, so I have 3x3 boxes instead of the 2x4 that I need. This doesn't occur when you put something of 100% width between the two rows though.
Also, the dividers in your template aren't set to 100%, so the layout breaks, creating uneven looking boxes. I might very well be missing something, but I thought you should know.
But great work, thank you for your generosity.
Why isn’t there a responsive landscape version for tablet? I never use my tablet in portrait
Thank god you figured this out so I can learn from you lol
I loved your 1120 system. Stoked to learn this model and use it now :D long live flexbox
Can anyone please explain why Rino says we still need to set width to 1120 when using percentages? Surely it doesn't matter as we're no longer trying to avoid pixel decimal points.
You don’t actually. But if you want your website to look exactly like your Figma on most screens than that’s the way to go.
@@rinodeboer I'm with you. Thank you for clarifying and all your videos in general.
I have lot of questions and doubts.. where can I ask the questions.. please guide
Hello. Im trying to install the template into my template library and I keep getting the message invalid file
Use flex box and max-width media queries. Can also put in custom code if you are Davy with flex box.
i recall him saying that he wants to design without coding, no idea if he knows html/css at all, but yea flex box is kinda what he wants :D
Really good explanation of the Flexbox and Elementor's implementation of it, thanks Rino. Can you share the settings you have for the additional breakpoints please? I have 2 customers who always say that the layouts don't work so well in landscape on their mobiles
Hi, A. Michel is right, why use "elementor gap", and in place, % + container justify "space between", it will leave a natural gap between elements.
Thank
And if we dont have the same height ? How to get equal height between container ?
Love your commitment… thanks for all your help in this website Dev journey I am on…
Bro is there any chance to u make complete video how design WordPress website for client and submit
I Love your videos! They are always helpful to me as a web designer who uses Figma, WordPress and ElementorPro!
I just did the elementor questionaire yesterday and in it they ask about improvements . I suggested a breakpoint set up in which the entire site will adjust to adjustable breakpoints according to set paramentors given by site designer . I have been having a terrible time trying to get a site of mine to change sizing cleanly but is due more to the background images on desktop. When dropping down to tablet they are ok but once reaching mobile sizing they really wig out . I can't delete them in tablet or mobile because they are then deleted in desktop . I am using same image twice on home page once as background . then again as background overlay which looks good but gets worse as sizing is reduced .
If it's too hard to figure out, it's never the worst to just duplicate the entire container/section, do responsive settings to hide the mobile version on desktop/tablet and vice versa, so you can perfect your mobile experience.
Hey Rino. Great video as always. I also played with these types of layouts and came to the same conclusions with Flexbox.
I ended up creating utility classes for CSS Grid instead. Grid is so much easier to predict and manage for layouts.
Elementor and Bricks don't yet have a UI for Grid, but it is easy enough to add utility classes for this and override as needed.
Let me know if you want me to do and share a quick video showing how to do this.
Yes please!
I would love to! Always interested in learning more easy ways. Could you email the video to rino@livingwithpixels.com? Thanks so much 🙏🏻
@@rinodeboer Hey Rino, I will email you as requested.
@@steala Hey Kalpesh, :) I have reached out to Rino. I won't post a link here, I think it is bad manners to post video links on other people's channels. I'll let Rino decide what to do with that.
You can post the link here! The reason I asked for email is because I wasn’t sure it was a RUclips vid.
So will you change your channel name to LivingWithPercentages? 🤣
I should 😅
Could you please clarify your your boxed page width. In other videos you mentioned the 1140px width is not ideal. But I also see graphics outlining a total boxed width of 1140px with 10px gutters on the right and left, bring the useable space down to the easily gridable number of 1120px. But I also thought I read that you suggest changing the total boxed with in Global settings to 1120px. Could you please clarify if the width field of the content main content area should be globally set to 1140px or 1120px?
Globally it's better to set it to 1120, so that you don't have to mess with 10px left and right when you leave it at 1140. So the content area then becomes 1120.
Is it possbile to write a font-size like i do in CSS? Like this: font-size: calc(50% - 10px)? Because thats the fix when you programm this stuff
hey i saw you added different devices view can you explain how you do it
Thanks for this, I now know what grow is for. Have you considered not using those inner containers? How about one container and set it's elements to the desired percentage widths? Doesn't all those extra containers add to the bloat?
Awesome! Well, that’s not possible when you have multiple items in each container. In some situations you can get away with widgets, but a lot of times you also don’t. And sometimes containers with widgets create less code than widgets with all kinds of features, since some widgets have lots of functionality which you don’t need.
@@rinodeboer Agreed. If you have simple elements in a row then, yes only one container works. And... I did a quick test of using three inner containers and without. I could not see any change (or very little) in the html load. Not quite sure how Elementor achieved this but good on them!
Do you think there is a future for Elementor, given that more
optimal builders such as blocks have come out recently?
Yes, most of the other builders are not production ready in terms of features. For smaller websites there will be competitors. But Elementor is so big that it will take quite some time for another builder to get big. Also, the other builders don't have that much budget to market. It's not only the product that sells I believe. But I actually have an interview planned with the CPO of Elementor where I will be diving into their future, because I also want to get more answers.
@@rinodeboer I think Elementor will remain for a long time, but I think Elementor will fit into a niche more for beginners and advanced users. So for people who won't code themselves will stick to Elementor and I think this is the target group Elementor aims for. Bricks and Oxygen aim for professional developers, and these builders will be always ahead of Elementor in their possibilities. Of course, that's my personal opinion as a web developer with almost 20 years of experience🙂
Well I am a beginner but thoroughly enjoyed this episode and cannot wait for more. Thanks so much.
Wanted to download template, but subscribing do not work. No EMail arrived. Tried several...
what extra breakpoints do you usually add?
Thanks for your video. I really appreciate your clear and smart explanation of this container concept and percentages etc. (I downloaded your template but I got an error in Elementor (Pro) saying "Invalid File" when trying to import it as a template.)
such good fundamentals! Really hard core which we love!!! Thank u
did any of you try this method recently ? i tried to apply this on a current project and it does not work pretty sure i follow every step, the container is 1120 and so on...
when i tried using 50% for 2 columns and 33% for 3 columns it worked!! i think we no longer have to calculate the gap in between, Elementor maybe does it itself, can anyone confirm or deny this statement please ?
Thanks again Rino, for your super tutorial! Can you please tell the name of the extension in 4:15 please^^
Hey Rino, I'd love to see an approach on hero images, seems like I'm never happy with the proportions of it
Can't wait for your elementor course btw
Do you have the percentages for 1230 container?
Great video! Well done Rino!
Hey Rino, love your videos awesome value on all of them, but why not just use percentage (instead of pixels) in the gap between elements?
Thank you. I have tried that, but it doesn’t really work because when things wrap then it needs to understand what the % is on a vertical level, and since there is no end to a containers height Elementor doesn’t know what to do, creating problems. You can try it then you’ll probably see what I mean. So thats why its better to leave the containers flexible and the gaps on pixels.
@@rinodeboer Ah. didn't see that one coming, you're right. Keep it up Rino!
Hi Rino, what kind of measuring tool (for seeing the pixels) are you using here? It's not within Elementor right? are you using a chrome extension?
Great vid! "Slightly" off topic: My nr.1 challenge now are: What are some of the best ways to display long texts (of course also mobile and tablet friendly!)... For example long-ish intro texts, even on the front page.
PS: Thrilled to buy courses from you, too. Please include at least three "hacks"/ tricks/ ideas for long text sections in your course! -thanks
I've added the extra breakpoints but the default numbers looks different than the one I see in the video. Were the breakpoints values changed ? is there the list of value somewhere ? Thanks
What screen measurement tool you use?
hello there, by any chance did you find what's the measurement tool?
Big content. The confirmation email to download template never arrive
You introduced me to Bricks through your video about Black Friday deals. I think it’s a million times better, at the very least in potential, than Elementor. I would like to see your opinion and overview of it! Elementor is barely getting flexbox and Bricks already has it with Grid on the way. It also lets you easily choose which format to use (px,rem,vw,etc) and can even implement CSS calculations. It’s easily replaced 6 plugins for me.
Awesome to hear! What plugins did you save?
@@rinodeboer I know it's different for every project and some features are now new or in beta on Elementor, but I was able to remove all of Crocoblock but I kept Jet Engine, which is compatible with Bricks. But off the top of my head just with Croco I was able to reduce plugins for tabs and sliders and possibly others I'm not quite familiar with which plugin has which features I use. I was also able to remove Ele Custom Skin and a performance plugin. I know loop is now in Elementor, but I haven't experimented with its integration. I hear it's not too robust. The latest update for Bricks just added interactions, which is awesome - less JavaScript writing now. I think it would be cool to see your take on this since you're far more familiar with Elementor than I probably am.
Amazing Tutorial Rino! Does this scale well with Height as well? Especially with images or do we need a clamp() solution?
This solution is much better than working with pixels. It's crazy that there isn't an option for column gap or row gap.
Thanks so much for the great advice and the templates, Rino!
Really appreciate the time and effort you invested in learning about the container behaviour 😉
I just started to get to know the container system and need some input:
I created 2 horizontal containers with the exact same settings. I added text widgets to both, also with the exact same settings. Breakpoints are set by Elementor but when I drag the desktop window (viewport) to reach the tablet breakpoint the text alignment/text on desktop changes all the way with every minor decrease in VW. In other words, the text block does not stay the same, it changes constantly until it reaches the next breakpoint and then snaps to those settings.
Are there any specific settings I have missed to keep the text block fixed until it reaches the next breakpoint?
Soooo LivingWithPercentages from now on? :) Keep up the good work, cheers
Is the container feature already compatible with all the Crocoblock plugins like JetEngine and Jetwoobuilder?
great watching you share your learning, great energy.
Muchísimas gracias Rino... Te ganaste un nuevo suscriptor. El contenido de tu canal es buenísimo. Muchas Gracias.
Amazing Video Rino! This layout only works for equal containers/elements in a row beneath each other right? If for example you have four elements in a row and then add a fifth element (f.e. for blog post or loop items) the grow functionality gives a wrapping element a growing widht and the items aren't the same size anymore. How can you provide that?
A three column layout on desktop will get this way to two rows with tow 50% Elements in the first row and a 100% (growed) Element in the second row
Yea, you are right. But that situation that you first described doesn’t occur that easily because with 5 containers its much better to do a row with 3, then a row with 2 and then an empty container.
Hi Rino, excellent content as usual. I just have a question about those rules: as I'm following your channel, are those rules "compatible" with one of your latest video, i.e. Easily Manage your Container Width from here in Elementor released about 1 month ago?
Hello Rino! I don't know if you've come across this dilemma at some point... because it's exclusively for Windows. How do you deal with the 125% zoom that Windows brings by default? It has happened to me that website designs end up looking much bigger on the screen than they really are because of that damn client-side zoom.
By the way, excellent as always the information you give us!