Span elements still visible after display:none;

Question

I have four span elements that serve as Font Awesome (icon font service) stacks meaning that they each contain two font-awesome "i" elements.

       <span class="fa-stack fa-2x left-arrow-button portfolio-arrow-button">
            <i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
            <i class="fa fa-chevron-circle-left fa-stack-2x left-arrow-img" aria-hidden="true"></i>
        </span>
        <span class="fa-stack fa-2x right-arrow-button portfolio-arrow-button">
            <i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
            <i class="fa fa-chevron-circle-right fa-stack-2x right-arrow-img" aria-hidden="true"></i>
        </span>
        <span class="fa-stack fa-2x left-arrow-button-2 portfolio-arrow-button">
            <i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
            <i class="fa fa-chevron-circle-left fa-stack-2x left-arrow-img" aria-hidden="true"></i>
        </span>
        <span class="fa-stack fa-2x right-arrow-button-2 portfolio-arrow-button">
            <i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
            <i class="fa fa-chevron-circle-right fa-stack-2x right-arrow-img" aria-hidden="true"></i>
        </span>

I created a CSS media query at a min-width of 1290px, and wanted to hide these span elements (and their children of course) starting at this query size.

So, I added (at this query size) the class "portfolio-arrow-button" to all of these span elements and gave them a declaration of display: none;

This didn't work.

Knowing that when it comes to making style overrides to Font Awesome icons it sometimes requires using the :before pseudo selector, I tried:

".portfolio-arrow-button:before", but to no avail.

What eventually worked to hide the buttons was: targeting each "i" element, within their parent span element, and using the :before pseudo selector, then using the "display: none;" declaration.

.button-circle-background:before, .left-arrow-img:before, .right-arrow-img:before {
        display: none;
       } 

Although I'm glad that this hid the "buttons" themselves, I would really like for the span elements to be gone from the page entirely also.

No they are not visible, but when inspected with the debugger, they are still there (the span containers, not their children).

Anyone have any ideas on how to get rid of them or why this is the case?

Help is greatly appreciated, thank you!

Solution 1

krzychek is correct in the answer above (main.css is overwritten by font-awesome-css.min.css) but if you cannot change the order of the files, then here's another way to do it:

CSS

#Portfolio > span {display:none;}

Solution 2

as I can see in dev tools, both styles are being applied to element, but one from font-awesome-css.min.css is chosen. Is main.css placed after font-awesome-css.min.css?

I'm not CSS guru, but my guess is that main.css is placed before other css and therefore overridden by following rules :P

Also you can add !important directive after display:none. However it is smelly and better to avoid.