On Page Builder – After upgrading to version 2.5.6 just yesterday, the plugin seems to now be ignoring the CSS I’ve added to a Revolution Slider row/widget. My theme, Executive Pro (a Genesis child them) unfortunately has forced a max width on the page and wants to put the blank vertical bars on my whole page, which is okay/desired, except for the Slider Revolution slider at the top. Note that the width setting in Slider Revolution is set to “full width” which is supposed to be fully responsive, but unfortuneately, this revslider setting doesn’t trump the theme max width setting, I found a way to overcome this with Pagebuilder by putting the following CSS in the attribute field of the Widget Style area:
.full-width-div {
position: absolute;
width: 100%;
left: 0;
}
Up until upgrading yesterday this worked and I’ve used it on several pages. Version 2.5.6 Page Builder seems to ignore this and I get the non-full width slider now.
I’d rather not revert to an older plugin version as that strategy is never sustainable.
Questions:
1. Is there better CSS I could use to overrule the max width setting in the theme, that would work?
2. Any thoughts on why the new plugin version might be ignoring the added CSS in the widget? Has anything changed with the code sequencing?
Here’s an example, http://nexviewconsulting.com/network-careers/
I’m using wp 4.7.5 (I will upgrade to 4.8.1 when released, but upgrades at the 4.x level are now never without incident)
Thanks.
Hi Traveler17
Thanks for posting.
The CSS Styles field is not meant for CSS rules. The contents of the CSS Styles field is added to an inline
style=""tag so it can’t handle a rule. What the CSS Styles field can process is a declaration per line, a declaration being made up of a property and a value. For example:The usual semi-colon at the end of each line isn’t required.
My brief overview to using the Attributes tab can be found here: Thread: How do Page Builder row attributes work – row class, cell class and CSS styles.
Moving forward, what you can do is insert your rule at CustomizeAdditional CSS:
.full-width-div {position: absolute;width: 100%;left: 0;}And then insert the rule name at Attributes > Widget Class, without the period:
All of the above said, you should ideally be making rows full width by editing the row (click wrench icon far right) then clicking LayoutRow Layout. Set Row Layout to Full Width or Full Width Stretched. Full Width will stretch the background 100% and Full Width Stretched will stretch the background and the contents 100%.
Hopefully, I’ve understood your question correctly, if not, let me know.
Hi Andrew – thanks so much for your fast and helpful reply. Page Builder has been so helpful to me and your help was so appreciated that I purchased a single year of Site Origin Premium.
I tried changing the Row Layout setting to full width and full width stretched, but it didn’t over-ride the theme max width setting in the theme, it’s a stubborn setting and I’ve fought with this a few times on various things.
I did create the CSS rule and named it/used it as you described and this did the trick, so this one is closed.
Thanks again for a great plug-in and the work you do.
Eric.
Hi Eric
Thanks for your support, it’s most appreciated :) With a SiteOrigin Premium license you can reach support via email on [email protected]. That’s the fastest medium for premium support.
Glad to hear you’ve made progress with row attributes.
If possible, please, can you send us an email and include a link to your site. We should be able to solve this full-width stretched issue by adjusting the container that Page Builder targets. That setting is hidden away at SettingsPage BuilderFull Width Container.