-
Posts
-
Hi guys,
we currently maintain about 100 sites built upon Enfold and custom CSS using Quick CSS.
After your recent introduction of “Responsive Styles” within the 5.1 release nearly all of these pages broke due to Custom CSS not working anymore which worked before. In particular the new responsive styles take precedence over custom css styles and classes.
I am only writing now as we just updated our prod env to 5.1.2 and our dev sites to 5.2.1. The issues exist in both versions and only came to our attention within the live sites. Our dev env doesn’t use that much custom Quick CSS…For columns (
/config-templatebuilder/avia-shortcodes/columns/columns.php) we were able to “fix” the issues using you newly introduced filter “avf_disable_columns_responsive_margin_padding”.
For the Grid Row “cell” (/config-templatebuilder/avia-shortcodes/grid_row/cell.php) this is not possible as you hardcoded the add_responsive_styles in there (line 603 in 5.2.1) without any possibility to disable that. Even worse it is set with the “!important” modifier rendering any attempt to change the values by custom css nearly impossible.
We were only able to hotfix this within the Grid Row by using the “avf_el_styling_responsive_styles_skip” filter. Which leads to the sideeffect that the configured values for the Grid Row from the Enfold backend are now ignored and the default is always used. This is also breaking, but not as bad as before…In any way the way you added the Responsive styles seems to break backwards compat with custom CSS massively. I would kindly ask you to reconsider this feature and the way you implemented it. Custom CSS must remain to have a chance to overwrite the configured styles in the same way it did before Enfold 5.1. Alternatively we need a filter to permanently disable this feature globally(!). But that would only be the last resort in my oppinion.
As a side info: We have the following filter configured as your post css generation didn’t work with our caching rules due to the location where the css was generated to:
add_filter( 'avf_post_css_create_file', '__return_false', 10, 1 );
So you might want to set this as well to have an identical environment.I will add a test case to reproduce into the private content. Just put the shortcodes into an empty page and switch to the advanced layout builder afterwards. Then open the page on the frontend. Then add the following custom css to Quick CSS save and reload the page on the frontend.
Using the Browser DEV tools you will now see that the custom css cannot set the margin and padding anymore. That worked before and as there are many live sites out there relying on custom css this has to continue to work.
If you then add the following filters, the custom css will work again (only fhe first filter is necessary for this example):add_filter( 'avf_disable_columns_responsive_margin_padding', '__return_true' ); add_filter( 'avf_el_styling_responsive_styles_skip', '__return_true' );Quick CSS:
.open-job-boxes .job-box{ -webkit-box-shadow: 0 3px 6px 0px rgba(0,0,0,0.16); -moz-box-shadow: 0 3px 6px 0px rgba(0,0,0,0.16); box-shadow: 0 3px 6px 0px rgba(0,0,0,0.16); padding: 30px; background: #ffffff; } .open-job-boxes .job-box h3{ font-size: 20px; color: #212121 !important; font-weight: 600; margin-top: 20px; } .open-job-boxes .job-box a { background-color: #b3041c; padding: 13px 20px 11px 20px; font-size: 16px; color: #fff; text-align: center; overflow: hidden; position: relative; display: block; margin: 40px auto -51px auto; transition: 0.4s; border-radius: 0; max-width: 250px; border-color: #b3041c !important; } .open-job-boxes .job-box a:hover{ background-color: #cb001c !important; } .open-job-boxes .job-box:before{ content: ""; height: 52px; width: 52px; display: block; margin: -60px auto -5px auto; border-radius: 100px; border: 5px solid #fff; background: #b3041c; position: relative; z-index: 99; visibility: visible; }Thank you very much and best Regards,
Jan
For reference: We hotfixed the
cell.phpre-adding the old code. It seems to us that you do leave it in there just commented out for a reason ;-)So the grid_row/cell.php lines 602+603 looks as the following now solving the issues:
$element_styling->add_callback_styles( 'container', array( 'padding' ) ); // $element_styling->add_responsive_styles( 'container-padding', 'padding', $atts, $this, '!important' );But this is clearly just a temporary hotfix ;-).
Hi,
Thank you for reporting this problem – and very sorry for this.
A added filter ‘avf_disable_grid_cells_responsive_padding’ to cell.php (lines 602+603) – similar to “avf_disable_columns_responsive_margin_padding”:
/** * Allow fallback to ignore responsive padding in case a page/site gets broken * * @since x.x.x * @param boolean $disable_responsive_padding * @param array $atts * @param array $result * @param aviaShortcodeTemplate $this * @return false|mixed anything not false to fallback */ $disable_responsive_padding = apply_filters( 'avf_disable_grid_cells_responsive_padding', false, $atts, $result, $this ); if( false !== $disable_responsive_padding ) { // fallback $element_styling->add_callback_styles( 'container', array( 'padding' ) ); } else { $element_styling->add_responsive_styles( 'container-padding', 'padding', $atts, $this, '!important' ); }Will be in next release.
These filters allow to add logic to have a fallback only for existing pages.
Hope this will help you.
Best regards,
GünterHi @guenter ,
thank you very much for this. Sure, it will give us the option to work around the issue without patching the sources :-)
But as I believe you will roll out this (cool) feature to further components I would kindly ask for a real “fix”. As in “see if you can make the responsive feature work in a way that does not break existing css stylings”. As it is css specificity related there should be a reasonable way to actually solve this.
It will be a gamble in any other way where any new release might break existing pages. That wouldn’t be a good future.
Best,
Jan
Hi,
I added the following filter ‘avf_el_styling_responsive_styles_ignore’ for next release:
/** * Allow to ignore responsive styles handling on element basis and use for all screen sizes * * @since x.x.x * @param boolean $skip * @param array $atts * @param \aviaShortcodeTemplate|null $sc_context * @param string $id * @param string $container * @param aviaElementStyling $this * @return false|mixed anything except false will only use default setting for */ if( false !== apply_filters( 'avf_el_styling_responsive_styles_ignore', false, $atts, $sc_context, $id, $container, $this ) ) { $rule = isset( $this->callback_settings[ $id ]['styles'] ) ? $this->callback_settings[ $id ]['styles'] : array(); if( ! is_array( $rule ) || empty( $rule ) ) { return $added; } $this->add_styles( $container, $rule ); $added++; return $added; }and also added the $this parameter to filter ‘avf_el_styling_responsive_styles_skip’.
I hope this will help.
We try our best to stay backwards compatible, but it is impossible for all possible cases.
Best regards,
Günter
- You must be logged in to reply to this topic.