Two-column layout with boxed width content and image that stretches to the edge of the viewport

Подписаться 9 тыс.

Просмотров 3,4 тыс.

50% 1

How to create a two-column layout with boxed width content and image that stretches to the edge of the viewport in WordPress . 50vw breakout image layout in Breakdance.
Get Breakdance - breakdance.com... A record breaking visual builder for WordPress
Breakdance WordPress builder | WordPress | Tutorial
#breakdancevisualbuilder #css #customcss
FOLLOW ON TWITTER: / udoroessien
FOLLOW ON FACEBOOK: / udoro
=============================================
BUSINESS ENQUIRY: udoroessien@gmail.com
=============================================

Опубликовано:

3 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 15

@robdewit74 11 месяцев назад

Awesome! I was fiddling for a day to make this work on a website. This did the trick in 5 minutes. Thanks!

@reklameserbia 6 месяцев назад

Can you show 2 columns for mobile next to each other for small buttons, great video,👍🙏

@DesignwithCracka 6 месяцев назад

Sorry I don’t understand, but I guess If you wish to keep two columns, no need to do any adjustments on mobile breakpoint.

@nickr8339 Год назад

Another great tutorial, I learn a lot from Mr Cracka

@keviincosmos Год назад

I also use a similar method. So nice and really good for other types of layout

@rubengarciajr Год назад

Love this!

@OscarObians Год назад

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.

@martinboisclair4104 7 месяцев назад

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.

@DesignwithCracka 7 месяцев назад

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.

@JoyAmormio 3 месяца назад

what if both column have different color and goes full width, but keep the content site width

@keithr4691 8 месяцев назад

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.

@brianPowalski Год назад

thanks again! No hat this vid 😎. would this be easier or harder in bricks?

@DesignwithCracka Год назад

I think it's the same thing.

@heyblindmouse Год назад

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.

@DesignwithCracka Год назад

yep, not a very scalable solution