Strange CSS bugs appearing all over the page

Author Posts

sakomicro December 23, 2021 at 12:31 am

Hi!

this evening random little CSS changes appeared on my site. The strange thing is that the site looks good in the elementor editor but the live page has those error. Mainly it elements getting aligned wrongly.

Here you can see the differents between elementor editor and live:
https://prnt.sc/2438eae

There are many more through the other pages.

Now I allready tried to “Regenerate Files & Data” with the elementor tools. And I also tried to deactivate ALL Settings I have done in Microthemer. But the wrongly alligned elements stayed as they were.

Do you have any idea where those random changes are coming from?

It´s still the same site 😉

Thanks!

Sascha

Sebastian December 23, 2021 at 12:09 pm

Hey Sascha,

It looks like there is a bug in Elementor, or an Elementor addon. There are various links that appear on the frontend with the URL: /index.php?route=extension/payment/pp_express/express

They are not present in the HTML when editing with Elementor, and so the CSS selectors Elementor creates, that are valid when editing, break on the frontend. Here is one Example selector:

.elementor-2098 
.elementor-element.elementor-element-fbaa9c7 
> .elementor-container 
> .elementor-row 
> .elementor-column 
> .elementor-column-wrap 
> .elementor-widget-wrap {
   align-content: center;
    align-items: center;
}

This fails because, on the frontend, an opening link element is being inserted in between .elementor-container and .elementor-row (see HTML inspection image below). It is acting as a container for the .elementor-row div, which means using “>” (direct descendent) makes the selector invalid.

I suspect the source of the bug here is that the link should be closed immediately, rather than being a container for inner content. I can see that link being closed immediately elsewhere on the page.

I hope that helps!

Cheers,
Sebastian

Elementor links


sakomicro December 23, 2021 at 3:56 pm

Amazing man!!! That did put me on the right track. I found an old testscript to place the express button into the menu cart popup that made all this mess. Sorry to think that it mighht have something to do with microthemer.

Thanks again!

Sebastian December 24, 2021 at 10:29 am

You’re welcome, I’m glad I could help you get to the bottom of it 🙂

You must login or register to reply to this topic.