How can I create unequal column widths?

In my footer, I’d like the left side to take up more room than the right. I’ve tried to assign a class to each of my two columns, but what’s defining the 50% width is an inline style farther up.

<div class="fl-col fl-col-small fl-node-5500c7a8f048b" style="width: 50%;" data-node="5500c7a8f048b">
<div class="fl-col fl-col-small fl-node-5500c7a8f0873" style="width: 50%;" data-node="5500c7a8f0873">

The only option I can see is to target the individual node, but then I have to do that for every single page. Is there another way I’m overlooking?

Hey Jodi,

You can actually adjust the width of any column within a row. Once you have a module in a column, a new icon in the editing box will show that looks somewhat like a book. It accesses the column settings panel to where you can change the percentage of the column. Check out our help article on that here and let us know if you need anything further!


DOH! I can’t believe I never clicked on that button to find that setting! That helped, but I still would like to target that div so I can change it globally in my media queries for smaller screens.

I think I went about it wrong anyway … I built the whole site with Beaver Builder instead of just using it for the content areas. I’ll have to go back and figure out how to do it the right way so the header and footer are the same on all pages.

First time user, still learning :slight_smile:

No worries at all, Jodi! Glad to hear you are loving BB and look forward to seeing what you come up with if you decide to share! :slight_smile: