Weird CSS problem... not rendering correctly?

[Tristanarkesteijn]

Hi there!

I am using a CSS pseudo element, as such:

.free-points .x-column:before {
  content: "01";
  position: absolute;
....
}

and

.free-points .x-column:nth-of-type(2):before {
  content: "02"; }
.free-points .x-column:nth-of-type(3):before {
  content: "03"! important; }

This looks fine in the pro builder preview. However, the nth-of-type(3) renders as content “01” and not “03” in incognito mode. The weird thing is that the nth-of-type(2) renders correctly??

As you can see, i tried adding ! important, but that does not resolve it.

[rad]

Hi Tristan,

Thanks for reaching out.

I see too many content error using this tool https://validator.w3.org/. It works on the builder since it serves as a sandbox for each element preview. That’s why broken element element doesn’t affect another within the builder.

Please fix them, and these threads would help you too https://theme.co/apex/forum/t/need-help-with-footer-styling/52754/2, https://theme.co/apex/forum/t/very-strange-error-in-pro/52579/8

Thanks!

[Tristanarkesteijn]

Hi,

The biggest one seems to be Pro generated.

Is here in the generated CSS:

I fixed the important ones, only minor warnings remain, and the errors that are still there are unrelated.

[Tristanarkesteijn]

I now fixed it by adding:

.x-column.x-sm.x-1-3.timeline-col.bullet3:before {content:"03"}

in addition to the nth-of-type(3), which really should not be necessary, it looks sloppy.

This does look to be some kind of rendering bug.

[ruenel]

Hello Tristan,

I have checked your page and I found out that you added this broken html code:

Now <strong>available for the first time, </strong>but this time <strong>with a longer title 

The <strong> tag or any other stag you will insert should always be close to avoid any conflicts.

Hope this helps. Please let us know how it goes.

[Tristanarkesteijn]

Thanks!

That fixed it.

[christian]

You’re welcome.