Hide-for-small turning inline elements into blocks

[niccolomineo]

Inline elements (e.g. span) are turned into block elements when the visibility classes are applied. I read here that this was fixed in Foundation: foundation/foundation-sites#887

But I still have the same problem.

[olefredrik]

Hi,
Do you have a live example I can look at? I failed to reproduce the error on my side.

[niccolomineo]

Hi Ole,

http://sgocnet.org/site/

on the right hand side, the "Catania" event has an end and a start date
separated by a bullet. The bullet is surrounded by a span element with
class "hide-for-small-only", that acts as a block element.

Niccolò Mineo
USER INTERFACE DESIGN
www.niccolomineo.com http://www.niccolomineo.com/

2014-05-21 11:02 GMT+02:00 Ole Fredrik Lie notifications@github.com:

Hi,
Do you have a live example I can look at? I failed to reproduce the error
on my side.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/44#issuecomment-43730851
.

[olefredrik]

The visibility classes inherit the display property of their parent. In your case the parent is a paragraph (which is a block element), so .hide-for-small-only will behave as a block element for any screen other than small. A fix could be to apply a new class to your span element, and set the display property to inline for that spesific class.

[niccolomineo]

I changed the paragraph to a div with "event-date" class, and I have the
same problem.

Niccolò Mineo
USER INTERFACE DESIGN
www.niccolomineo.com http://www.niccolomineo.com/

2014-05-21 12:34 GMT+02:00 Ole Fredrik Lie notifications@github.com:

The visibility classes inherit the display property of their parent. In
your case the parent is a paragraph (which is a block element), so
.hide-for-small-only will behave as a block element for any screen other
than small. A fix could be to apply a new class to your span element, and
set the display property to inline for that spesific class.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/44#issuecomment-43738876
.

[olefredrik]

A standard div will also act as a block element, unless otherwise specified. Add this to your css, and you will be good to go: .event-date { display: inline; }

[niccolomineo]

thanks!

Niccolò Mineo
USER INTERFACE DESIGN
www.niccolomineo.com http://www.niccolomineo.com/

2014-05-21 13:30 GMT+02:00 Ole Fredrik Lie notifications@github.com:

A standard div will also act as a block element, unless otherwise
specified. Add this to your css, and you will be good to go: .event-date
{ display: inline; }

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/44#issuecomment-43743047
.

[olefredrik]

You're welcome!

[rshubbard]

This happens with Foundation button classes as well.

<a href="#" class="button hide-for-small-only">Default Button</a>

is now display:block and takes up the whole width. Any fix for this?

[elyrium]

Use .hidden-for-$size or .visible-for-$size - where $size can be a combination of 'small', 'medium', 'large', and you can further add '-only', '-up', or '-down'. EX: .hidden-for-small or .visible-for-medium-up will hide the element for small screen media query without affecting the display property.