Having issues with responsive layout

Beaver Builder
1

Hi there, here is a layout I’ve made with BB:
Layout on large screens

In order to have the background color, rounded corners, and padding you see, the headings of each box and the text areas of each box are all separate columns. Because nested columns are not yet supported on BB (any update on that?) the columns stack incorrectly on smaller screens:
Layout stacking wrong

How can I resolve this issue without nested columns? Thanks!

2

Hi Yaron,

Unfortunately, I do not believe this is possible in your current layout structure. However, I achieved a very similar style with a Header module and Text module in the same column.

  1. Add a Row with three columns to my page.
  2. Add a Header and Text module to each column.
  3. Configure the each module i.e. add a heading, text, alignment and so forth.
  4. Now add a custom class to each of the Header modules and the Text modules. I used the my-three-col-header in the Header module and my-three-col-text in the Text module.
  5. Add your styling to these classes and make sure to target the class that the header and text is coming from, then save the changes. For example:
.my-three-col-header .fl-heading {
  background-color: #333333;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  padding: 10px 0 !important;
}
.my-three-col-text {
  background-color: #ffffff;
  padding-top: 20px
}
  1. For each column, I set the padding in Column Settings to 20px in all directions.

This is what I ended up with:

Cloudup
Cloudup

Thanks,
Danny

3

Thanks, Danny! I had got it working putting everything in the text editor including inline styles but it wasn’t very maintainable for our less tech savvy contributors. Your solution works much nicer. The only tweak needed was to set the height of the my-three-col-text class to 100% to match the height of the equal-height columns so each module is the same height. Stacks perfectly and no global auto-size changes needed. Thanks again!

4

No problem Yaron. Happy to help and thanks for sharing the tweak :smiley:

Thanks,
Danny