Menu icon Foundation
is this a Foundation CSS Bug ?

try doing this:

<span class="hide-for-small-only">hide small</span> Lorem
            

         

the output should be
hide small Lorem (in one Line)

but i get
hide small
Lorem

seems that the span elemet is display:inline-block

visibility

try doing this:

<span class="hide-for-small-only">hide small</span> Lorem
            

         

the output should be
hide small Lorem (in one Line)

but i get
hide small
Lorem

seems that the span elemet is display:inline-block

Bob Sawyer almost 5 years ago

It's the "hide-for-small-only" that causes the issue. A standard span displays as expected. I confirmed that by changing the span tag to an em tag, and got the same results when the class was added.

Good catch!

jm almost 5 years ago

Hi Bob,
no, this issue is on all "show-for-xxx" and "hide-for-xxx" Classes. It doesn't matter what tag (span, em, b, ...) you take. Any Ideas ?

Hsa almost 5 years ago

I just come across that. visibility classes does not work with foundation 5. Whatever you use. Any ideas on this?

Hsa over 4 years ago

ok, solved this by using it like this:

<div class="show-for-small-only">
 ....code here...
</div>

<div class="show-for-medium-up">
 ....code here...
</div>

now it works.

jm over 4 years ago

Hi HSA,
that does mit solve the bug

jm over 4 years ago

I mean does not solve The bug

Rafi Benkual over 4 years ago

Spans are display inline - so that that is why when the visibility class is applied it makes it display block.

So unless another class is created this is not a use case for visibility classes.

jm over 4 years ago

Rafi, but how would you solve this issue

<span class="hide-for-small-only">hide small</span> Lorem