Hi,
As we are developing a custom theme based on Bootstrap, we are facing a small problem because of a conflict between the css automatically generated by BeaverBuilder through the file bb-plugin/css/fl-builder-layout-responsive.css and our custom css.
The conflict occurs only when the media is 768px large. It breaks the wanted layout as we used min-width (as required by Bootstrap)
That should be possible. All fl-cols are under an fl-col-group class which is also under an fl-row-content class. You can call either one so you have a stronger specificity. The CSS below should override the values from the BB stylesheet. You’ll just need to declare the width as important since the previous styling is declared the same.
Thank you for your response. Unfortunately, the width: auto !important breaks our css flow (and we don’t like !important )
If we comment the line in the wp-content/plugins/bb-plugin/css/fl-builder-layout-responsive.css file, all is fine. But if we need to update BB, it will be crushed.
To answer your question : no, we use BB plugin with a unique custom theme for one of our clients. This theme is based on the starter theme Underscores.
No problem! The only time I consider declaring a style important is when overriding another one that’s set as important as well, or overriding inline styling from JS. Your case is the former which is why I offered my solution.
That is indeed the case, so that’s not an option. Just another curious question, what are you trying to set the fl-col’s width to? Since this styling only applies when on mobile, auto or 100% should be the ideal options to make the columns stack on top of each other. Or maybe I’m just missing something.
In our case, we use Bootstrap and use @media (min-width: 768px) to define the different viewport. So the mobile layout works fine when viewport is less than 768px and the “tablet” layout works fine when viewport is more than 768px (ex: 769px). But when the viewport is 768px wide then it displays a mobile layout instead of a “tablet” view.
So the following style generated by BB forces the mobile layout when viewport is just 768px wide: @media (max-width: 767px) {
.fl-col-group .fl-col {
clear: both;
float: none;
margin-left: auto;
margin-right: auto;
width: auto !important;
}
}
And we can’t assign a value to the width of the fl-col for viewport other than mobile in order to override this setting.
As it is our first experience to make a custom theme with the use of BB, maybe we do something wrong.
Gotcha! I think that’s because on the BB page builder, the default Small Device Breakpoint is set at 768px. Changing this to 767px should fix you right up! That can be found on the Tools > Set Global Settings > Small Device Breakpoint when inside the page builder. Let us know how it goes!
)