Foundation-sites: [The Grid] uncenterend class

[dily86]

The class uncentered is not working

[gakimball]

We've made some fixes to the .uncentered class that haven't landed in a patch yet. Can you post a code sample for us to test?

[dily86]

Thank you for your prompt reply. Here is a code sample :

<div class="row">
    <div class="small-4 small-centered large-uncenter large-uncenter columns jaune">
        <p>Lorem ipsum. Donec id elit non mi porta gravida at eget metus.</p>
    </div>
</div>

[dily86]

In fact, the block remains centered on large screens despite the class large-uncenter

[gakimball]

The class is uncentered, not uncenter. See if that fixes it.

[rafibomb]

Seems to be working here: http://codepen.io/rafibomb/pen/mVqmMz?editors=110

I changed the class to large-uncentered.

[dily86]

Sorry, but the class uncentered does not exist in the last version of Foundation. This class exists in Foundation 5. Check the file foundation.css
.large-uncenter,
.large-push-0,
.large-pull-0 {
position: static;
margin-left: 0;
margin-right: 0;
}

[gakimball]

@dily86 We renamed them to be consistent, to both end in ed. Sorry for the confusion!

[dily86]

@gakimball large-uncenter is not working. I don't know why but the block remains centered on large screens :-(
Thanks for your time.

[gakimball]

@dily86 Right, this has actually already been fixed via 34cb85622e459cae13aea90252a54fe8a18dc81d

We'll have a patch out soon that will include this fix. In the mean time, use this CSS to get around it:

@media screen and (min-width: 64em) {
  .large-uncentered {
    float: left;
  }
}

[dily86]

Thank you very much. I just wanted to report that in case you had not noticed.

[rheaton]

@gakimball Hi! I upgraded to 6.3.1, which I includes the fix you mentioned in grid-column-unposition, but it doesn't handle removing the classes added to the last child.

The style still applied:

.small-centered, .small-centered:last-child:not(:first-child) {
    float: none;
    clear: both;
}

A codepen showing what happens if you attempt to uncenter:
http://codepen.io/rheaton/pen/MpzeaB

Anyway, I can solve the problem with pushing since I want an even number of columns on small for this particular design, but the issue exists. Let me know if I'm missing something!

Thank you for your work on this library 😁

[Luckyfella73]

I just came across the same problem, like @rheaton suggested I was able to solve it with the push classes.

Inspecting the code in chromes console it looks like the property clear: both; set by medium-centered has to be overwritten in the class large-uncentered. At least in my case the problem disappears when unchecking clear: both; set by medium-centered in the console.