[Resolved] Beaver Builder & GP

[Andy]

Hi,

I’m using Beaver Builder Lite for the first time with GP. Generally it works great but I’m having trouble getting columns looking consistent on mobile view.

You can see the build here: http://tinyurl.com/jdwcmls

If you look at the first row of 3 blocks, I achieved this layout by going into the Row Settings and entering 0px for the left/right padding and margin. I then went into the Column Settings and entered 0px for the left/right padding, leaving left/right margins at 20px. This seems ok on desktop view (although I would like to reduce the spacing between each column),but on mobile view, if you resize your browser between 430px and 479px the column is slightly narrower than the text column above it that starts ‘A phrase…’.

So on the next row of 3 columns I tried a different technique. I left the margins at 20px in the Row Settings ,but set the Row Padding to 0.
Then for the 1st column (Pre School Room) in the Column settings I set the left margin to 0 and the right to 20px. I then set the padding to 0. I then did the same for the 2nd column.for the 3rd column I set both column and padding to 0. I also had to resize the column down from 34% to 32.2% so it was the same height as the first 2 columns.
However, in mobile view the first 2 columns are now a different size to the 3rd column due to the right margins.

I also had to turn off ‘Enable Auto Spacing’ in Global Settings because this was removing padding from either the row or columns and causing me more issues.

Before posting this I had used some custom CSS to make things consistent, but it seemed a bit of a hacky/messy way of achieving things and I thought BB could achieve a simple 3 column layout without it.

So my question is am I going about this all wrong? Whats the best way to make columns a consistent width on all views?

I realise this is support for GP and not BB but Tom always gives such helpful responses.

Tia.

[Tom]

Hi Tia,

I’m afraid I don’t have a good enough understanding of how BB goes about their columns to give you a good answer without digging quite deep into their code.

However, I know they have pretty awesome support as well, and it should be a pretty easy question for them as they’re familiar with how they built their columns.

[Andrew Turner]

Alternatively, I know you also built a columns plugin but I’m not sure if it will work with full-width sections?

[Tom]

It will for sure, but it’s a little harder to design into boxes etc.. because it requires you to write CSS.

[Andy]

ok – so it works with the sections add-on?
I’m pretty comfortable using CSS as long as I know that before starting.

I actually have it looking about right now using some custom CSS, although I would like to know how to reduce the spacing between columns without affecting the height of each column.
I have posted a query on their support forum but I’m not sure they will respond as quickly for the free version of the plugin.

What did you think of the site design so far?

[Tom]

Absolutely, that plugin just gives you a shortcode to work with – you can use them anywhere.

You just need to add a class parameter to the shortcode, then adjust the CSS.

The site is looking great 🙂

[Author]

Posts