Edson Edson - 3 months ago 11
CSS Question

Span elements still visible after display:none;

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

bug-screenshot

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

Help is greatly appreciated, thank you!

Answer

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;}