Relative styling problems?

Description:

Yes, so the thing is that my relative styling works on backend and I can see it working in the editor, but when I go to the site, it’s like completely broken.

Step-by-step reproduction instructions:

  1. Go to the live site.
  2. Scroll down until you hit the Blog section.

Screenshots, screen recording, code snippet

Video recording of the problem

Environment info

  • WordPress version: 5.9.3
  • Gutenberg Plugin version: -
  • Cwicly Plugin version: 1.1.1.1
  • Cwicly Theme version: 1.0.2

Hi there @Normaali,

Thanks for the detailed report.
I’m sorry you’re having trouble with the Relative Styling.

While I can see the problems on your video, I can’t seem to see the blog section on the link you shared with us.
This would help since I can’t reproduce the issue on my side.

Thanks!

It should be visible now. At least when I tried it in incognito mode it was.

Can see it now! Will check it out, thanks :wink:

1 Like

I’ve also experienced some inconsistency when using Relative Styling.
This happens when going with a more general approach instead of targeting specific classes.
I think this is mainly because the editor additionaly wraps block elements in separate containers so you are forced to be most specific when it comes to your target selector in some cases.

After checking out the live site, it seems that you have nested a link within a link which isn’t allowed in HTML (thus creating the error, the browser does its best to sort things out).

I think that by default, the parent div is wrapped inside a link which would explain why you’re experiencing this issue.

Removing either one of the links should fix it.

Umm, this is a stupid question, but what do I need to remove? Or change? And where i can find that?

The blocks with IDs div-c7f7184 and div-c112aed and paragraph-c335f9b have the Link Wrapper option enabled.
div-c7f7184 contains div-c112aed which contains paragraph-c335f9b. A linked element cannot contain a child link element.
So you will have to review the situation and choose which elements redirects to the post.

1 Like

https://www.w3.org/TR/html401/struct/links.html#h-12.2.2

1 Like

Yes it worked, thank you so much for help!

1 Like

Glad that was it :wink: Thanks for letting me know!

1 Like