Unable to locate inline CSS causing parts of page to be blank

Question

Large parts on a live Wordpress page shows blank because a piece of inline CSS has opacity set to 0. Unfortunately I am unable to find where this inline CSS lives.

<div class="grve-element grve-text vc_custom_1655582827387">
    <div class="ptsTableFrontedShell">
    <!-- Style to display all tables correct-->
    <!-- this block will be remove in frontend.tables.editor.block.base after init -->
    <div class="ptsPreDisplayStyle">
        <style>
            .ptsBlock {
                opacity: 0;
                visibility: hidden;
            }
        </style>

vc_custom refers to Visual Composer which apparently now is WPBakery. Given that information I looked into the Row, Column and Text Block settings when editing the page with WPBakery but couldn't find any custom CSS.

Regarding ID 1655582827387, I have no clue where to start searching for this ID. Lastly, it's unclear to me where the class ptsBlock comes from.

Answer 1

Finding inline CSS can be a right pain.

In your case, the problem is visibility: hidden; which means nothing is going to show up. You could add your own custom CSS and override it with the !important rule.

So, for example, you could put this somewhere in the header. Most themes have a custom CSS section in the customize menu - that might be best.

 .ptsBlock {
      opacity: 1 !important;
      visibility: visible !important;
 }

This works by raising the priority of your CSS over the CSS that does not have the rule.