csswordpressmobileresponsive

How to find CSS element from Inspect in the actual source files?

before scaling

before scaling

I had a question on how to find out which part of your code needs changing to adjust this "display:none !important" functionality which prevents the web site to be responsive on mobile. When going under 767px content simply disappears and that condition triggers.

If I change it to "display:inline !important" that works but I've only done it in-browser and I can't find where to change it in the source files. Is there any methodology on finding this out? I've even used grep on all the files in the theme looking for keywords but I don't know where else to look. Also tried adding the changed code into the "Additional CSS" menu however with no success either.

Solution

  • The question is:

    Is there any methodology to finding this [where the CSS lives] out?

    You want to know the methodology to find the CSS. Let's walk through how I did it.

    Step 1

    The inspector gives you the location of the styles. Using your images, I marked the locations with the red boxes:

    enter image description here

    Notice that the style in question is located in (index):557. Where is that? It's not an external stylesheet, as with the style.css example. Rather, it's been added directly into the <head> and wrapped in <style>.

    Using Dev Tools, look in the <head> of the DOM (in the HTML markup). You'll find it there.

    Step 2:

    Where do you find it? The method that I use is to look at the style declarations first in the <head>. Are there any comments to give you clues?

    Next, I look at the actual style attributes. In this case, it's .tm_pb_builder. That is giving you a clue to the component that builds the CSS.

    I did a Google search for that class attribute, like this: wordpress tm_pb_builder. That took me to GitHub and the Power Builder plugin from TemplateMonster.

    Step 3

    Now you know that the plugin Power Builder is the one responsible for adding that style into the <head>. You can then take a look at the respective page and explore how this page is built with this page builder.

    That's my methodology.