Menu icon Foundation
"Small-centered" etc. no longer supported in Foundation 6?

Hey people.

It seems like I can't make a custom build of Foundation 5 anymore.
(If it indeed IS possible please let me know, and it will solve my current issue for now. I'm on a tight deadline. :( )

I tried to use the new flex-grid with foundation 6, but it seems that we can't specifically set aligning in respect of screen sizes. That means i can't set "small-centered" for example, on a column anymore.

I can center align a column by setting the parent row to "align-center", but what if I only want that to be center aligned for small sizes but not on large?

I then tried to go back to using the old grid system, and it doesn't respond to the usual classes as we new them from Foundation 5. You can check out what I mean on the following URL:

http://temp.isobar.dk/mehrzad/foundation_troubleshooting/

I've read the docs on the grid and flex-grid four times now, but I can't seem to figure out what's wrong.

gridflex-gridaligning

Hey people.

It seems like I can't make a custom build of Foundation 5 anymore.
(If it indeed IS possible please let me know, and it will solve my current issue for now. I'm on a tight deadline. :( )

I tried to use the new flex-grid with foundation 6, but it seems that we can't specifically set aligning in respect of screen sizes. That means i can't set "small-centered" for example, on a column anymore.

I can center align a column by setting the parent row to "align-center", but what if I only want that to be center aligned for small sizes but not on large?

I then tried to go back to using the old grid system, and it doesn't respond to the usual classes as we new them from Foundation 5. You can check out what I mean on the following URL:

http://temp.isobar.dk/mehrzad/foundation_troubleshooting/

I've read the docs on the grid and flex-grid four times now, but I can't seem to figure out what's wrong.

Mehrzad Beiknejad almost 4 years ago

P.S. I've noticed that when I remove the:
HTML
<div class="separator" style="margin-bottom:250px"></div>

it will work as intended. But it will break again, even if I remove the inline styiling, and class name, so it only says:

<div></div>

With foundation 5 I could make these separator spacings easily and they would be pretty visual in the html, where I put them.

Mehrzad Beiknejad almost 4 years ago

No response???

Ok can you foundation guys then just reenable the possibility of downloading a custom build of foundation 5? You disabled it as soon as you pushed the new foundation 6 live.

Thanks in advance.

Matt Rogers over 3 years ago

I'm having the same problem. I can't get columns to center anymore... small-centered, exactly the way it is in the docs, isn't working (it worked fine in Foundation 5).

Did you ever solve this problem with Foundation 6?

Glenn Philp over 3 years ago

The issue is .columns looks to see if it is the :last-child element, if so it will float:right.
CSS
.column:last-child:not(:first-child), .columns:last-child:not(:first-child) {
float: right;
}

My question for @Mehrzad Beiknejad is why wouldn't you add padding to your container instead of creating a empty div separator? My recommendation is to make the following changes.
```HTML

  <!-- TODO: REMOVE
  <div class="separator" style="margin-bottom:250px"></div>
  -->

  <div class="small-5 columns small-centered columns text-center">
    <div id="front_page_title">
      <h1 class="uppercase">Trying to center this</h1>
      <h1 class="heavy uppercase">Box right here</h1>
    </div>
  </div>
</div>


CSS

// If you need this style for a specific page then add a body class
// .front-page .wrapper
.wrapper {
padding-top: 250px;
}
```