Just upgraded to v2.0 rc on a staging site and noticed one page on the entire site where the banner is broken.
If you take a look at the URL above you’ll see that the banner is greatly extended in height with the following section (black text) incorrectly displayed in the bottom of the banner and the white banner text no longer vertically centred. If you go to any other page under Ministry in the header menu you’ll see the correct banner display.
The strange thing is that the same template is being used to render the banner on these pages. Inspecting a correct banner (first div in main) you’ll see this:
It’s likely that you have some class or variable with an invalid character - or maybe it’s a name, just a dot. Or some custom CSS. It’s hard to say what exactly would be the case here, so I suggest:
Disable all plugins, especially the optimization and performance ones.
Disable all templates, and see if it’s working then
Remove elements one by one and check if it starts working.
Now, I would say that by that point, you should figure out what is causing the issue. If not, can you send temporary login credentials to your test/staging website (so that I can easily remove elements and change CSS) and a link to this topic to help@bricksbuilder.io using the email address you used during the purchase, so we can take a look?
The one on line 75 is using my custom css (in appearance > Theme file editor) as follows:
/* If focus-visible is not supported in a browser */ @supports not (selector(:focus-visible)) {
body.bricks-is-frontend :focus {
outline-style: solid;
outline-color: var(–focus-colour);
outline-width: var(–focus-width);
outline-offset: var(–focus-offset);
}
}
This syntax is correct I think?
The one on line 627 is because I have this defined in the theme styles > typography > miscellaneous > focus outline:
var(–focus-width) solid var(–focus-colour)
Does Bricks not support this? It all works OK in the website.
Despite all of this the issue with the broken banner still exists. I’ll send over the login details.
Regarding the banner, it appears to have been a minification, combining, or caching issue. I disabled Litespeed CSS combining, cleared the cache, regenerated the styles, reactivated the setting, cleared the cache again, and now everything seems to be fine again. Can you confirm?
It looks fine thanks. Not sure why only one page would be affected, the cache was off. I’ll reload the staging site again and see what happens and then apply this fix if necessary.
Unfortunately, I don’t know either If it happens again, disable the CSS minification and combine settings, and clear the cache. Then, it should work again.
I’m re-opening this because turning off the combine setting makes the page speed performance drop from 100% to 80% for this page. Additionally I have done more digging and the issue is being caused when any source is defined for the audio file.
In case any one else deals with this issue and so you don’t have to read the entire topic, in summary, the banner layout on one page only is breaking after updating to v2.0.1 from v1.12.5. The banner layout is a template used on many of the site’s pages. You can see what the page should be like on Recent sermons – Otter Vale Mission Community which is running v1.12.5.
After updating this to v2.0.1 the page banner layout breaks as seen on Sermons – Otter Vale Mission Community where the image used for the banner background is not being contained by the banner section and so it covers the following section as well.
The reason the banner is breaking is because the following css is being removed from the o-banner class on the banner section:
position: relative;
justify-content: center;
This css is being removed when any source is defined for the audio element on the page. The audio files on the page are being generated via a query loop on a card design that contains the audio element and if I remove the custom field name for the dynamic data on the audio element the banner displays correctly. The moment I add the field name back it breaks. I have also tried removing the query loop and linking the audio element manually to a file and also to an external URL and again the banner layout breaks each time.
Additionally to check the page wasn’t corrupted, I created a new page with similar layout and the same thing happened.
Interestingly the banner looks correct in the builder and when launched to the front-end from the builder.
I’ve found the issue. I noticed that some of the styling on the audio player was incorrect on the staging site compared to the live site and tracked this to the css file wp-mediaelement.min.css. When I excluded this in litespeed the styling came back and the banner was also no longer broken. Not sure why not having this excluded would remove two lines of css from a custom class and why this has to be excluded in v2.0.1 and not 1.12.5.
If it happens again, disable the CSS minification and combine settings, and clear the cache. Then, it should work again.