Great. And how would I make the two column divs equal height? This is important to scale the image on smaller viewport when content column get's taller than the image - it would be great to keep the image same height and horizontally cropped. Because adding height:100% to the divs does not work...
I've seen several approaches to doing this and even Kevin uses grid for this, it's so easy to do - put two columns, the text in one and the image in the other. Put the section in relative and the image in absolute top,right,bottom a 0, with 100%, max-with calc(50vw -(gap / 2)). For mobile, set image back to relative and change max-width to 100%. And that's it.
yes, it's a simple technique, though it has it's cons, using absolute positioning means you'll have overlaps when you did not intend to, of course this can be resolved by hunting the breakpoint this overlaps occurs and making adjustments, but it's obvious that method introduces at least one problem to be resolved.
I wish you'd do a video for bricks. I really don't understand the logic behind the Breakdance UI flow. It sometimes feels like some controls are purposely mislabelled to obfuscate the DOM structure and what's really going on.
Thanks Cracka, for the detailed how to video. However, Breakdance should not require so many steps to accomplish this. Full width sections should be included in the Library/Design Sets.
Personally I think I would cheat and just create a three column design and just leave the first column empty lol. I'm sure that's not what you should do but ehh.
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
Awesome! I was fiddling for a day to make this work on a website. This did the trick in 5 minutes. Thanks!
Another great tutorial, I learn a lot from Mr Cracka
Great. And how would I make the two column divs equal height? This is important to scale the image on smaller viewport when content column get's taller than the image - it would be great to keep the image same height and horizontally cropped. Because adding height:100% to the divs does not work...
I've seen several approaches to doing this and even Kevin uses grid for this, it's so easy to do - put two columns, the text in one and the image in the other. Put the section in relative and the image in absolute top,right,bottom a 0, with 100%, max-with calc(50vw -(gap / 2)). For mobile, set image back to relative and change max-width to 100%. And that's it.
yes, it's a simple technique, though it has it's cons, using absolute positioning means you'll have overlaps when you did not intend to, of course this can be resolved by hunting the breakpoint this overlaps occurs and making adjustments, but it's obvious that method introduces at least one problem to be resolved.
Can you show 2 columns for mobile next to each other for small buttons, great video,👍🙏
Sorry I don’t understand, but I guess If you wish to keep two columns, no need to do any adjustments on mobile breakpoint.
what if both column have different color and goes full width, but keep the content site width
I wish you'd do a video for bricks. I really don't understand the logic behind the Breakdance UI flow. It sometimes feels like some controls are purposely mislabelled to obfuscate the DOM structure and what's really going on.
Its much easier than Bricks after a couple of hours.. :)
thanks again! No hat this vid 😎. would this be easier or harder in bricks?
I think it's the same thing.
Thanks Cracka, for the detailed how to video. However, Breakdance should not require so many steps to accomplish this. Full width sections should be included in the Library/Design Sets.
I also use a similar method. So nice and really good for other types of layout
Love this!
Personally I think I would cheat and just create a three column design and just leave the first column empty lol. I'm sure that's not what you should do but ehh.
yep, not a very scalable solution