I have a chart on a few pages like this:
http://adworks.wpengine.com/power-pressure-washing/
(hosted on WPengine) />
I’m using SEO smart links on the site and the code is showing up.
I noticed if I change the heading row to default the code goes away but this obviously takes away from the highlighted heading feature and the aesthetic on the desktop view.. And honestly in responsive the chart becomes difficult to read correctly anyway (unless you inject the name of the service provider in each field) so I am leaning towards hiding it on the mobile view anyway. But it looks like it is related to the responsive design. At that page width, Enfold/Avia-layout-builder is employing some sort CSS (not clear to me yet as to why.) Unfortunately it doesn’t support HTML entities (i.e., the links), and thus we see the raw HTML markup written on the page.
Enfold/Avia-layout-builder is adding this dynamic CSS to the page for the given page-width:
.avia-table-1 td:nth-of-type(1):before { content: ‘COMPETITOR’S PRESSURE CLEANING ‘; }
As you can see its trying to insert content using CSS instead of HTML. I really can’t understand why it does this, since #1 rule of CSS is that CSS is for presentation and not content. Anyway, the “content” style doesn’t support rendering of HTML content here.
Any feedback? I need to hide this ASAP so if you don’t respond by Monday it may not be there to view.
Hi adworks,
Whats happening is that the theme uses the pseudo-element :before to add in the heading to the element so that the table doesn’t completely fall apart on mobile devices or cause the user to need to scroll over.
If you wanted to use a regular table that does do that, you can just add that in to the Text tab instead of using the table element from the theme.
Regards,
Devin