Use "Inspect Element" to troubleshoot potential Design/CSS problems

If you work with different themes and modules you may frequently encounter problems with CSS. This might be in the process of modifying theme/module related CSS code or it might be that there are CSS conflicts between themes and modules (for Example because the same terms are used). In any case, I recommend you to use the "Inspect Element" function of your browser. Usually you can activate this function by a right click on the element/area you want to inspect.

Doing so will launch a kind of editor where the code related to this element is shown. Usually on the right side you find all the CSS code related to that element. Thus you can see what CSS code is applied to the element and in which file and line of the file the code can be found. This makes your troubleshooting and modification usually very easy.

Example of "Inspect Element" as a mean to troubleshoot CSS problems

Drupal themes to be compared