Foundation 4 center align only on small screen

Question

New to using Zurb Foundation and starting with version 4, I can't find a way to have the grid aligned to the center on small screens only, and then revert to the default grid on large screens. Are there any native classes supplied with Foundation 4 that can do this?

I've had a look at their documentation on http://foundation.zurb.com/docs/components/grid.html which demonstrates the classes "small-centered" and "large-centered" which do work as intended but there is a line saying

Small versions will carry through all breakpoints if not overridden by a large version.

To me this sounds like I either need to create a class that overrides the center align from "small-center" class on large displays, or that there is a class existing - this I cannot find.

Here is some sample code I am testing with:

<div class="row">
    <div class="large-2 columns">
        <span>text</span>
    </div>
    <div class="large-6 columns">
        <span>text</span>
    </div>
    <div class="large-4 columns">
        <span>text</span>
    </div>
</div>

The grid system functions as expected and intended but I want all three columns to center align on small screens only.

If I do need to create my own classes and styles, is anyone aware of SCSS that may be available to the community already addressing this issue?

Answer 1

It turns out that this is not supported out-of-the box. There is a simple fix though and that is by adding the override as I've suggested in my comment.

@media only screen and (min-width: 48em) {
    .column.large-left,
    .columns.large-left { 
        float: left !important; 
    }        
}

Notice the use of em that is the Foundation-standard way of doing things. That should take care of the smal-centered issue. You then just have to add that class to any small-centered elements that you don't want centered. You can see it in action here.

Answer 2

You can't do that with Foundation non-semantic classes.

You'll have to do it manually and (hopefully) semantically:

@media only screen and (max-width: 767px) {
  .some-container { text-align: center; }
}

Answer 3

You need to checkout CSS files and search for mediaqueries that are for small screen only and then add properties for that specific column.