{"id":161,"date":"2021-10-18T09:27:56","date_gmt":"2021-10-18T09:27:56","guid":{"rendered":"http:\/\/wappoblog.lndo.site\/?post_type=docs_wappo&p=161"},"modified":"2021-10-18T13:17:41","modified_gmt":"2021-10-18T13:17:41","slug":"css-plugins-conflict","status":"publish","type":"docs_wappo","link":"http:\/\/wappoblog.lndo.site\/docs\/css-plugins-conflict\/","title":{"rendered":"Working With CSS plugins conflict"},"content":{"rendered":"\n

WordPress’ powerful ecosystem generates conflicts<\/h2>\n\n\n\n

When building your website with WordPress, you are going to want a contact form plugin, a social share plugin, a privacy policy plugin, a newsletter plugin and the list can go on… And that’s great, because with WordPress you have literally tons of choice to build exactly what you want.<\/p>\n\n\n\n

Now chances are that each of the plugins you are going to install have been built by different developers with different needs and different constraints and methodologies, maybe even some of those plugins were first developed 10 years ago and therefore not taking into account the new modern web development best practices.<\/p>\n\n\n\n

The bottom line is that 3rd party conflicts<\/strong> is going to be part of your WordPress’ journey, there will be plugins not working well with each others, some of these conflicts will literally impede functionalities from working properly. There will be Javascript Conflicts, PHP conflicts, and CSS conflicts.<\/p>\n\n\n\n

Javascript conflicts and PHP conflicts will be difficult to work with, when one of these conflicts happens you will need to make a choice, use plugin A or use plugin B. <\/p>\n\n\n\n

On the other end, working with CSS conflicts is much easier, you are going to need to learn a bit of CSS obviously, but there is tons of resources online, and this is really within everyone’s reach.<\/p>\n\n\n\n

Creating live CSS rules in the browser<\/h2>\n\n\n\n

In each modern browsers such as Firefox, Brave, Chrome there is always an inspect<\/strong> mode, it usually appear in the contextual menu when you right click on a webpage in your browser. Once you do that, some magic pane will appear. On one side will show the HTML code of the page you are inspecting and on the other side will appear the CSS rules that are applied.<\/p>\n\n\n\n

The inspect mode is great, because it brings you precisely to the part of the page you want to modify. <\/p>\n\n\n\n

Let’s say there is a menu on your webpage that is bothering you because the text is too small or too big, right click on a menu, that menu’s CSS rules will appear. And you will be able to work with it live and therefore prepare the final rules you will add later on to your style sheet or to your webpage.<\/p>\n\n\n\n

Inspect mode in Firefox<\/h2>\n\n\n\n