Responsive question: 4 columns to 2 columns on smaller devices

General Discussions
1

Hi there.

I’m using Beaver Builder for the first time and really enjoying it so far.

I’m currently rebuilding a client site in WordPress and need to match the original as closely as possible. The original has rows with 4 columns that switch to two column layout on smaller device sizes.

In Beaver Builder I have the 4 column rows set up but I can’t see how to easily set them to switch to 2 column on tablet sizes. Can someone provide some example css to help me with this?

Thank you!

2

Hey Phill,

You actually don’t need CSS at all! You can go into the first two column settings panels and actually change the mobile setting for tablets (medium devices) and phones (smaller devices) really easily. The column settings can be accessed via the little book icon and in the advanced tab, you’ll see a responsive section to where you can adjust the width on different sized devices. You’ll want to use 50% for the first two columns. Let us know if you have any issues!

Best,
Billy

3

Hi Billy!

Thank you for the super fast response. I’d just stumbled across these settings myself. Super impressed by Beaver Buddy!

Thank you!

4

Awesome, thanks Phill, enjoy!