CSS problem with custom theme based on foundation 5

Beaver Builder
1

Hi there!
I have built a custom theme based on foundation 5 framework. Works great with beaver builder … BUT… :wink:
There’s an issue I can’t seem to fix.
First of all: This is the page that shows the issue I’m having:
http://zwoelf-ender.de/test/? (Password : hsmf )
And this is what it SHOULD look like:
http://zwoelf-ender.de/portfolio/hochzeiten/

Problem: When the text is shorter than the width of my content, the whole row shrinks to the width of the text and the slider also shrinks to that width.

To see the effect you can go to http://zwoelf-ender.de/test/? and add some text to the one that is already there… just so the full length of the layout is reached. After that, the slider will grow also.

Now I need to find out what to change in my theme to make this work.

Thank you very much!
If you need more information, let me know!

2

Hey Anja,

I’m not very familiar with the Foundation 5 framework, but I just took a look at your test site and it seems you have some kind of column class setting turned on. Using Inspector to look at your “very slim” content, I can see this css:

<div class="large-12 columns" id="content">

I’m not 100% sure because I don’t have access to the actual page, but I think that you either, have a setting for columns turned on, or are using some type of shortcode to create 12 columns.

I also don’t think that’s being generated by Beaver Builder, because it’s limited to a maximum of 6 columns.

Can you check your page and theme layout settings?

Hope that helps:)

3

Hi colcar,
thanks for the quick reply.
that css class “large-12 columns” is a part of my theme and NOT generated by any shortcode. It means that the current container (#content) is supposed to be full width… so twelve of twelve columns. That’s how foundation works. By using “large-4 columns” and “large-8 columns” in one “row” you create your layout with a left sidebar. By using “large-12 columns”, it’s supposed to be full width (12 being the highest number of columns). Columns in this case is not a division into 12 small parts but only states that the WIDTH of 12 columns should be used for this container.

I hope I was able to make it clear. So there SHOULD be no columns in this content. And when I use the regular editor, nothing like this happens. Content is as wide as it’s supposed to be. This only happens when I use beaver builder.

I really depend on working this through as I make all my themes with foundation and it would be very sad if I couldn’t use beaver builder for that.

I am happy to set up a test site and give anyone who is willing to dig in ftp access or a wordpress user or whatever!

Thank you for listening and trying to help!!!
Anja

4

Wait! I just found the culprit! Its the class “columns” that comes from foundation and has the following css:

.columns {
position: relative;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
float: left;
}

I removed “columns” from the original “large-12 columns” and it looks good now. Seems that beaver builder is using some OWN css for .columns and messes up foundation’s .columns.

In this design I have my content in only one column and it seems to work finde without .columns in place. But I will have to test and see what happens in other layouts.

But thanks again for helping!
Anja

5

I see how Foundation 5 works now.

That makes sense now.

I guess in the battle of the .columns class, Beaver was getting a bit confused.

Interesting find and something anyone using Foundation 5 and Beaver Builder should be aware of.

Glad you got it worked out Anja.

6

HI colcar,
thanks again for looking. I just tested with another theme I’m building (this time it has a sidebar) and it’s not working. I’m not sure beaver builder should only work in full width pages (without a sidebar) but in my case it expands the content part (where the loop is) to full with and “pushes” the sidebar away when in editing mode. That wouldn’t be so bad if it went back to normal after editing. It doesn’t. When the page is saved, it stays distorted.

That is really ugly because I really love foundation AND beaver builder and would love to use both of them together.

I have even removed all of the .columns classes (renamed them to “colas” in my theme and in foundation.css). It seems it wasn’t the .columns - NAME that produced the problems.

I’m sure there must be more foundation users out there. Maybe we can work this out together. I am very willing to give out a foundation based theme for testing if anyone is interested to tackle this with me!

THANK you!
Anja

7

Anja,

This looks like it’s a bit more complicated than thought. I’m going to leave this one for the Builder Beaver guys to look at when they return from their Thanksgiving Holiday.

I’m sure one of the guys will be able to come up with a simple solution for you.

8

Thanks colcar for all your help!
And again I’m sending out my call for more help! Is there anyone from Beaver Team to have a look at this issue? Builder will be worthless for me if I can’t get this fixed !

I will set up a test site with all information you need for anyone who wants to look into this!
THANK YOU!
Anja