Menu icon Foundation
Possible bug with .small-centered?

Hey folks,

First off any help is appreciated. I am reposting this with the code online as requested:

http://cdpn.io/owaDh

The bug is explained in the demo. What you are looking for are the social media links, which for now I have placed in a UL with plain text, T G L and R as placeholder representatives of eventual images.

This column sits on the far right, taking up 2 columns, and its behaviour set to change on small size, with the other row items being removed for small.

On Chrome, when small-centered is applied, instead of appearing on the right side, the column sits below the phone numbers instead. When shrunk to small size, it works properly on Chrome - centering as desired.

On Firefox, at all sizes - the column doesn't even appear at any size!

Any feedback would be much appreciated, and although I expect it is my code and lack of understanding, part of me wonders if this is a bug manifesting itself.

Thanks for your time.

Foundation 5.Small-CenteredStrangefirefoxchromePossible Bug

Hey folks,

First off any help is appreciated. I am reposting this with the code online as requested:

http://cdpn.io/owaDh

The bug is explained in the demo. What you are looking for are the social media links, which for now I have placed in a UL with plain text, T G L and R as placeholder representatives of eventual images.

This column sits on the far right, taking up 2 columns, and its behaviour set to change on small size, with the other row items being removed for small.

On Chrome, when small-centered is applied, instead of appearing on the right side, the column sits below the phone numbers instead. When shrunk to small size, it works properly on Chrome - centering as desired.

On Firefox, at all sizes - the column doesn't even appear at any size!

Any feedback would be much appreciated, and although I expect it is my code and lack of understanding, part of me wonders if this is a bug manifesting itself.

Thanks for your time.

Karl Ward about 5 years ago

Ok Im not gonna say too much, but thats one helluva columns setup you have ... Also, it is a bit peculiar how you are mixing the columns with visibility classes ... perhaps not the best idea, as columns are created specifically for breaking differently across screen sizes, whereas in your case you are also adding visibility modifiers.

I can see that social media links are stacked incorrectly because the column they are within hast lost its float: right; style, because it is nullified with your .small-centered ... small-centered basically means "center this column on ALL screens (also big ones)", and we can see that is not possible in your setup. I think you are mixing a few too many concepts here and it could be done differently ...

Stephen Voisey about 5 years ago

Thanks Karl, and agreed I can simplify it, this was one of the first things I built with Foundation.

I'm slightly confused on the small-centered being applied to all sizes, given it's naming, but this is something I will consider when I recode it. Thanks for replying.

Karl Ward about 5 years ago

It is confusing, so you are not alone in that department. However, the -centered class is generally made to be used for a row with only a single column, not at full width, where you want that column centered.

<div class="row">
  <div class="small-3 small-centered columns">3 centered</div>
</div>

Basically the only difference between using large-centered instead of small-centered, would be if you only want the column to center in the middle on large screens and not small screens (which is unlikely).

There are some good examples of this on the docs page:
http://foundation.zurb.com/docs/components/grid.html#centered-columns