1

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 website 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.

Kirk Beard
  • 9,569
  • 12
  • 43
  • 47
TImmuh
  • 57
  • 1
  • 2
  • 10
  • One problem is if you go to change the css in the plug-in page when you update the plug-in you will lost your changes. It's better use your style.css file. – Marco Romano Dec 08 '16 at 15:38
  • I tried looking in style.css but I couldn't find anything relating to "@media only screen and (max-width: 767px)" or anything on the display function. I just don't know where to look to find this parameter and change it. – TImmuh Dec 08 '16 at 15:47
  • Because it' a Plug-in setting. You need to look in the files of your plug-in call tm_Builder. – Marco Romano Dec 08 '16 at 15:49

2 Answers2

5

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.

hellofromTonya
  • 1,301
  • 8
  • 8
  • Props for walking through an actual methodology. Not enough folks do that. – Dre Dec 08 '16 at 23:18
  • This was a beautiful explanation. Thanks so much for taking the time to write this. I solved the problem. I looked inside the power builder and the fix was so much easier than I made it to be. Didn't even need to look that deep into the code. The parameter implementation was already there. – TImmuh Dec 09 '16 at 11:54
0

You can add display:inline !important in the style.css of your child-theme, but it will only works if the plugin css file loads before it.

If the theme's css loads before plugin css, you can create a new css style and enqueue it at the very last end of the style enqueue.

add_action('wp_enqueue_scripts', 'se_41042975', 999);

function se_41042975(){
    wp_enqueue_style('css-plugin-override', get_stylesheet_directory_uri(); ?>/css/custom_css.css');
}

Hope it helps!

Benoti
  • 2,170
  • 2
  • 14
  • 15