I always wanted to do this but didn't find a way. I end up using percentage paddings to achieve it but it's just a hack. Now, your tutorial gives a very clean method that I can start using going forward. Thank you for this.
Yeah, this method is way easier. I'm glad you found the video useful. If you have any other tutorial you'd like me to cover, feel free to reach out to me.
Thank you for this tutorial using the new containers and not the sections. For people looking to stretch the image used. Just use a background image in that column and stretch it. Do not use the image from the elementor elements
Brilliant. Quick question... what if a user has their zoom set below 100% (ex. 85%)? Is there a way to still have these elements line up in the center like you have shown?
@@daveden2 The image put in the settings for large 1024 x 2024. I set it to full and it solved the problem. Great work my friend. I look forward to your future videos. I have Liked and Subscribed.
Nice! Is it possible to pull a var() for the content width? This way, if you edit the default content width in site layout settings, this would automatically adjust?
As far as I know, it won't be possible to retrieve the content width from the elementor settings correctly. However, you can create a global CSS variable in your Site settings' Custom CSS or using a code snippets plugin. Once created, you can then use it wherever you need it.
@Frank Tielemans It may not be an Elementor issue. Working with percentages in your custom variable and calc functions sometimes do not behave as you expect
@Sonia Paradell Thanks for watching! For an uneven split, a bit more calculation is needed. I'll look into making a follow-up video on that. Can you describe the layout you want? 🙏
@@daveden2 I know how to this. Ooohboi has a tutorial about this. You have to start from a 50%/50% split layout but you have to add a fixed value to it. Like 50% + 100px.
Are you using containers? Did you remember to set the flex-direction on the parent to flex-end? If you're still facing issues, you can contact me directly with your website link via the contact form on my website or email me at helpdesk [at] daveden [dot] co [dot] uk
Awesome vid, thank you so much. How can you make sure that the image is still stretched on larger screens, tho? I can see a gap on the right side of the screen when I use the full width of the browser window :-(
Are you referring to my demo? Cos, I usually set a max-width of 1920px for my pages. Can you kindly share a URL to the page where you've used the layout to helpdesk@daveden.co.uk, so I can take a look
If i dont have any content in left hand side, but i want the right hand side should be fullwidth. And if i want 33% in left and 67% on right how to achieve this this? Could you please give a solution.
Hi Dave, I've create some hacks building on your excellent tutorial. It covers responsive tablets and using background images / video that can be rescaled to fit all devices. Love to share the template with you buddy.
When i try to put two containers side by side when i preview it its always on top of each other .i added text and image carousel next to each other but in the preview they are parallel any idea why?
I always wanted to do this but didn't find a way.
I end up using percentage paddings to achieve it but it's just a hack.
Now, your tutorial gives a very clean method that I can start using going forward.
Thank you for this.
Yeah. Using percentage hacks, there might be issues on some screen sizes
Excellent video. Thank you.
I've been trying to do this for almost two hours now... Thank God I found this.
I'm glad you found it helpful!
You can also check out this other video for a more flexible solution -
ua-cam.com/video/V_qXkmljlxY/v-deo.html
You are angel in my life. Not even a single person was able to solve this. Thanks a lot man.
Maaaaaan You're a life saver! Very clear and straight to the point tutorial. Thumbs up!
Thanks! I'm glad it helped you out
life saver
Thank you!!
You're welcome
FANTASTIC!!! I've created similar, but it can be hot and miss getting it right. You sir, are a GENIUS. Just subcribed, Many thanks.
Yeah, this method is way easier. I'm glad you found the video useful.
If you have any other tutorial you'd like me to cover, feel free to reach out to me.
Amazing, short and usefull tutorial. Thanks!
Very Helpful video, Thanks a lot
I'm glad you found it helpful.
brilliant! just what we needed ! thank you !
Thank you for this tutorial using the new containers and not the sections. For people looking to stretch the image used. Just use a background image in that column and stretch it. Do not use the image from the elementor elements
Very nice work I like it very informative and the pictures
Thank you very much. I really appreciate your kind words. ❤️
very helpful, thank you!
I'm very happy to hear that
Brilliant. Quick question... what if a user has their zoom set below 100% (ex. 85%)? Is there a way to still have these elements line up in the center like you have shown?
It should always line up with the centre regardless of the zoom level. That's the great thing about it.
@@daveden2 The image put in the settings for large 1024 x 2024. I set it to full and it solved the problem. Great work my friend. I look forward to your future videos. I have Liked and Subscribed.
Oh, great! Do let me know if you have any video requests
Nice!
Is it possible to pull a var() for the content width? This way, if you edit the default content width in site layout settings, this would automatically adjust?
As far as I know, it won't be possible to retrieve the content width from the elementor settings correctly.
However, you can create a global CSS variable in your Site settings' Custom CSS or using a code snippets plugin.
Once created, you can then use it wherever you need it.
@@daveden2 I tried that before and CSS custom variable in a calc function is kind of buggy in Elementor. Sometimes it works and sometimes it doesn't.
@Frank Tielemans It may not be an Elementor issue. Working with percentages in your custom variable and calc functions sometimes do not behave as you expect
Useful, but will it work with a 40%-60% or 70%-30% container layout?
The calculations might get too complicated for anything other than a 50/50 split
@@daveden2 That's exactly what I am trying to do. How complicated would it be? Thanks a lot and great tutorial!
@Sonia Paradell Thanks for watching! For an uneven split, a bit more calculation is needed.
I'll look into making a follow-up video on that.
Can you describe the layout you want? 🙏
@@daveden2
I know how to this. Ooohboi has a tutorial about this. You have to start from a 50%/50% split layout but you have to add a fixed value to it. Like 50% + 100px.
Brother, Amazing
I love you dude,
Fucking thanks man! Exactly what I needed
not working for me i dont know what,s the issue?there is still white space on the right side of the image
Are you using containers? Did you remember to set the flex-direction on the parent to flex-end?
If you're still facing issues, you can contact me directly with your website link via the contact form on my website or email me at helpdesk [at] daveden [dot] co [dot] uk
Nice! Thanks for this :)
I'm glad it helped you out
Awesome vid, thank you so much. How can you make sure that the image is still stretched on larger screens, tho? I can see a gap on the right side of the screen when I use the full width of the browser window :-(
Are you referring to my demo? Cos, I usually set a max-width of 1920px for my pages. Can you kindly share a URL to the page where you've used the layout to helpdesk@daveden.co.uk, so I can take a look
If i dont have any content in left hand side, but i want the right hand side should be fullwidth. And if i want 33% in left and 67% on right how to achieve this this? Could you please give a solution.
Are you working with containers? Then, you may want to check this other tutorial for a more flexible layout:
ua-cam.com/video/V_qXkmljlxY/v-deo.html
Clever!
Hi Dave, I've create some hacks building on your excellent tutorial. It covers responsive tablets and using background images / video that can be rescaled to fit all devices. Love to share the template with you buddy.
Fantastic! You can email me at info@daveden.co.uk. I'd love to hear from you.
When i try to put two containers side by side when i preview it its always on top of each other .i added text and image carousel next to each other but in the preview they are parallel any idea why?
Did you set the flex-direction to row → on the parent container?
yes i have done that
@@daveden2
A MAAA ZINGGGGGG
What's the most complicated layout you've created using Flexbox Containers in Elementor?
without custom CSS?
@@franktielemans6624 Yeah, without custom CSS. The Custom Units selector has opened up some nice possibilities
How can I do 60%/40% layout?
I have a separate video about that. It's a bit more complex - ua-cam.com/video/_3ajk2fw-xE/v-deo.htmlsi=i7xHt1rP9f0fwq3f
Thank you @@daveden2 I found this video and it worked for me. Hugs from Brazil!
@@DanieleJanuario I'm very happy to hear that. 😊
it only works with 50% in the boxes
Yeah, you're right. Here is an updated version for more flexibility
ua-cam.com/video/V_qXkmljlxY/v-deo.html
Thank you!