Why does my site change my CSS for me?

Question

I have jssor slideshow module installed on my drupal 8 site. I am trying to have the arrows on the slides to navigate the slideshow. The problem is something is adding

display: none;

to my arrows. When I remove the the line in the terminal the arrow appears but when I put my mouse back on the page out of the terminal window the arrow disappears and the

display: none;

line is back.

What causes this and how can I stop it?

Answer 1

Have you tried adding display: block !important; ? I often have to use the !important to stop my CSS being overridden by other modules.

The preferred method of resolving this kind of issue is to ensure that the CSS files are being loaded in the correct order (it is Cascading Style Script after all). However in this instance, and as is often the case with CMS type sites (or those where you don't have access to changing the loading order of the CSS files), the !important declaration is the solution.