You're a real life saver bro, Ive been looking for weeks on how to get two containers side by side on mobile version couldnt find any tutorials. Thank you Thank you for your work. Ill definitely like sub and share your content tank you so much
Thanks! So I saw you were using px for the padding, would you recommend px over %? I saw a previous video of yours and you explained why you usually prefer % when doing padding. Thanks for any help!
I have used pixels in the past, before I dived a little deeper and researched what each unit does and why. Since then, I've mostly been using % for padding, except in some cases. Sometimes, I prefer pixels, or even REM, because it's more exact. You really can not go wrong with either. I see a lot of awesome websites that use pixels and I see a lot of awesome websites that use %, or even other responsive units. In general, I love using %, because the amount of padding that looks good on my large screen would be horrible on a laptop, and the same padding that would look good on a laptop would make a website feel incredibly cramped on my screen. If you can strike a good balance between different screen sizes with pixels, however, there's nothing wrong with using those either. Still, the beauty of percent is that it is easier to set up while still being more responsive. All in all, it comes down to what you prefer and what you find easier to work with. If I had to answer with one or the other, I would say go with percent. Thank you for your support! 🙌
What when you have a theme with sections and predefined global styles? I am having a nightmare working with container blocks, I am forced to use custom css to avoid predefined styles, which are ok for sections, but not working well with containers. Still can't manage to make my conainer blocks with elements fully responsive.
nice video but i think this demonstrates why css grid is far better for structural layout rather than flexbox... elementor also calculates this wrong it should be 33.33% for example if you want a 3 column grid... also flex doesn't take gap into account so this is why it breaks when you add gap and it doesn't appear elementor let you subtract this either... but good info regardless and can be used if you want different grids at different breakpoints...
Thank you! Yeah, flexbox definitely isn't perfect yet. I'm curious how Elementor would implement the CSS grid. When it comes to percentages, you're right. Let's say you have a colored background on your nested container, and you have a few of them and want them to be in several rows while having some space between each of them. You won't be able to do 33% (for example), because those percentages will have to be lowered appropriately to accommodate for the extra space. Which I hope they find a solution for because it gets time consuming really fast.
@@Reialesa You can use wrap and gaps between containers without adding padding. You need at least Elementor 3.10 and activate the custom units options (the pencil icon) and a simple CSS Math Function Let's use your example with six containers. on desktop 2 rows, so each row 3 containers and a gap of 20px. With 3 containers per row you have two gaps of 20px so in total you have 40pw gap per row. Divide 40px by the number of containers per row: 40px / 3 = 13.3px 3 containers per row so each each container has a width of 33.33% 100% /3 = 33.33% Select one of the containers, go to the layout tab > width. Click on the dropdown with the units and select the pencel icon (custom units) and add this line calc(33.33% - 13.3px) Copy-paste this style to the other 5 containers On tablet you want 2 containers per row with 20px gap. So container width is 50% - 10px, because 100% / 2 is 50% and 20px /2 = 10px on tablet container width is calc(50% - 10px) On mobile you don't hav to change anything, because containers will stack automatically and container width will be 100%. Remember with this method you can still use padding in the containers, the wrapping will still work the way it should.
After 10 videos about containers I can say that you are a life saver, thanks.
I'm happy to help, thank you for your support. I appreciate it! 🙌
You're a real life saver bro, Ive been looking for weeks on how to get two containers side by side on mobile version couldnt find any tutorials. Thank you Thank you for your work. Ill definitely like sub and share your content tank you so much
Awesome, I'm very happy this helped solve your issue! Thank you for the amazing support 🙏
Thank you for a very clear explanation of Flexbox Containers. Now I get the logic behind it. Great job.
Thank you for an awesome comment and for your support, I'm glad I could help 💪
Thanks! So I saw you were using px for the padding, would you recommend px over %? I saw a previous video of yours and you explained why you usually prefer % when doing padding. Thanks for any help!
I have used pixels in the past, before I dived a little deeper and researched what each unit does and why. Since then, I've mostly been using % for padding, except in some cases. Sometimes, I prefer pixels, or even REM, because it's more exact. You really can not go wrong with either. I see a lot of awesome websites that use pixels and I see a lot of awesome websites that use %, or even other responsive units.
In general, I love using %, because the amount of padding that looks good on my large screen would be horrible on a laptop, and the same padding that would look good on a laptop would make a website feel incredibly cramped on my screen. If you can strike a good balance between different screen sizes with pixels, however, there's nothing wrong with using those either. Still, the beauty of percent is that it is easier to set up while still being more responsive.
All in all, it comes down to what you prefer and what you find easier to work with. If I had to answer with one or the other, I would say go with percent.
Thank you for your support! 🙌
Thank You Thank You, this saved my day. Awesome Keep it up
That's great to hear, I'm glad the video was helpful. Thank you for your support, I appreciate it! 🙌
Thank you so much mate
What when you have a theme with sections and predefined global styles? I am having a nightmare working with container blocks, I am forced to use custom css to avoid predefined styles, which are ok for sections, but not working well with containers. Still can't manage to make my conainer blocks with elements fully responsive.
very good explaination
Thank you very much! 🙌
thank you
I'm happy to help, thank you for your support! 🙌
nice video but i think this demonstrates why css grid is far better for structural layout rather than flexbox... elementor also calculates this wrong it should be 33.33% for example if you want a 3 column grid... also flex doesn't take gap into account so this is why it breaks when you add gap and it doesn't appear elementor let you subtract this either... but good info regardless and can be used if you want different grids at different breakpoints...
Thank you! Yeah, flexbox definitely isn't perfect yet. I'm curious how Elementor would implement the CSS grid. When it comes to percentages, you're right. Let's say you have a colored background on your nested container, and you have a few of them and want them to be in several rows while having some space between each of them. You won't be able to do 33% (for example), because those percentages will have to be lowered appropriately to accommodate for the extra space. Which I hope they find a solution for because it gets time consuming really fast.
@@Reialesa You can use wrap and gaps between containers without adding padding.
You need at least Elementor 3.10 and activate the custom units options (the pencil icon) and a simple CSS Math Function
Let's use your example with six containers.
on desktop 2 rows, so each row 3 containers and a gap of 20px.
With 3 containers per row you have two gaps of 20px so in total you have 40pw gap per row.
Divide 40px by the number of containers per row: 40px / 3 = 13.3px
3 containers per row so each each container has a width of 33.33%
100% /3 = 33.33%
Select one of the containers, go to the layout tab > width. Click on the dropdown with the units and select the pencel icon (custom units) and add this line
calc(33.33% - 13.3px)
Copy-paste this style to the other 5 containers
On tablet you want 2 containers per row with 20px gap.
So container width is 50% - 10px, because 100% / 2 is 50% and 20px /2 = 10px
on tablet container width is calc(50% - 10px)
On mobile you don't hav to change anything, because containers will stack automatically and container width will be 100%.
Remember with this method you can still use padding in the containers, the wrapping will still work the way it should.
thank you
I'm happy to help, thank you for your support! 🤝