Using BB css classes fl-col-group, fl-col

Beaver Builder
1

Hi,

I’m trying to put a row with two columns (50%-50%) in a page of one of my sites.
In the first column i have an html module and in the second column i have a photo module.

Next, i want to divide html content in two columns using BB classes fl-col-group, fl-col.

I want to use BB CSS classes to avoid using Bootstrap or other similar css lib.

The html code in the html module is like the following:

<div class=“fl-col-group”>
<div class=“fl-col” style=“width: 50%”>
HTML CONTENT COLUMN ONE
</div>
<div class=“fl-col” style=“width: 50%”>
HTML CONTENT COLUMN TWO
</div>
</div>

It works like expected, but when i try to resize the column in the BB frontend editor the first column gets very narrow - it seems with zero width or something, breaking the row’s layout.

Is there any solution to overcome this?

Regards,

J.Ferreira

2

Hi J,

Can you try the following HTML and see if this works better for you.

<div class="row">
  <div class="fl-col-group">
    <div class="fl-col" style="width: 50%;">
      <p>HTML CONTENT COLUMN ONE</p>
    </div>
    <div class="fl-col" style="width: 50%;">
      <p>HTML CONTENT COLUMN TWO</p>
    </div>
  </div>
</div>

If it doesn’t, can you provide a link to your site, so we can take a closer look, please?

Thanks,
Danny

3

I Danny.

Thanks for your answer, but still not working.
I’m going to create a new site (blank site with the theme and plugins i’m using in all my sites) and i’ll provide a link to it and administrator login and password later on for you to see.

Regards,

J. Ferreira

4

Hey Joao,

That sounds like a plan! Let us know when it’s up so we can check. :slight_smile:

Ben

5

[Content Hidden]

6

Hi Joao,

Thank you for the kind words, we really do appreciate it!

I was able to recreate this on my end to, so I will be sure to report this. However, I think the best thing would be to either use the grid in the Genesis Framework (if they have one) or enqueue a simple, lightweight grid system and use that.

Alternatively, if you use the BB Theme, you can use the Bootstrap grid without any issue.

CloudApp

Thanks,
Danny