Menu icon Foundation
F6 Flex grid issues

I'm trying to implement automatic stacking and it doesn't appear to be working.

The divs never stack. I've tried both medium-unstack and large-unstack - neither work.

Here's my code:

<div class="row large-unstack">

        <div class="columns">
        
            <h2 class="smaller"><a href="">Subsection Landing Page</a></h2>
            <p>Brief intro.</p>
            <ul class="no-bullet">
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
            </ul>
        </div>
<!-- end one of three -->
    <div class="line-separator hide-for-medium"></div>
<!-- two of three -->
        <div class="columns">
              
            <h2 class="smaller"><a href="">Subsection Landing Page</a></h2>
            <p>Brief intro.</p>
            <ul class="no-bullet">
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                	<ul>
                    
            </ul>
        </div>
<!-- end two of three -->
    <div class="line-separator hide-for-medium"></div>
<!-- three of three -->
        <div class="columns">
            
            <h2 class="smaller"><a href="">Subsection Landing Page</a></h2>
            <p>Brief intro.</p>
            <ul class="no-bullet">
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
            </ul>
        </div>
<!-- end three of three -->
   
    </div>
            

         

I know I have the flex grid because other items are using it and large-expand does work.

The syntax for the autostacking is cleaner though so I would rather use that.

Any ideas?

Foundation 6. Flex Grid

I'm trying to implement automatic stacking and it doesn't appear to be working.

The divs never stack. I've tried both medium-unstack and large-unstack - neither work.

Here's my code:

<div class="row large-unstack">

        <div class="columns">
        
            <h2 class="smaller"><a href="">Subsection Landing Page</a></h2>
            <p>Brief intro.</p>
            <ul class="no-bullet">
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
            </ul>
        </div>
<!-- end one of three -->
    <div class="line-separator hide-for-medium"></div>
<!-- two of three -->
        <div class="columns">
              
            <h2 class="smaller"><a href="">Subsection Landing Page</a></h2>
            <p>Brief intro.</p>
            <ul class="no-bullet">
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                	<ul>
                    
            </ul>
        </div>
<!-- end two of three -->
    <div class="line-separator hide-for-medium"></div>
<!-- three of three -->
        <div class="columns">
            
            <h2 class="smaller"><a href="">Subsection Landing Page</a></h2>
            <p>Brief intro.</p>
            <ul class="no-bullet">
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
            </ul>
        </div>
<!-- end three of three -->
   
    </div>
            

         

I know I have the flex grid because other items are using it and large-expand does work.

The syntax for the autostacking is cleaner though so I would rather use that.

Any ideas?

Julie Lewis over 3 years ago

It's never stacking on Chrome or Safari. Firefox has a weird behavior where the columns dont shrink, they just disappear of the right hand side!

Lynda Spangler over 3 years ago

Check your CSS to ensure it's complete. It's working fine for me: http://codepen.io/Lynda333/pen/rxJLbJ

Julie Lewis over 3 years ago

For development we've separated all the foundation and fonts into a single file that will hopefully be relatively stable.

@charset 'UTF-8';

@import 'settings';
@import "fonts/opensans/opensans";
@import "font-awesome";
@import 'bower_components/foundation-sites/scss/foundation';
@import 'motion-ui';

@include foundation-global-styles;
@include foundation-flex-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;

@include motion-ui-transitions;
@include motion-ui-animations;

I don't think I'm missing anything...

Julie Lewis over 3 years ago

@Lynda,

Where did you get that css? Was that compiled from sass or is that the vanilla css version?

Lynda Spangler over 3 years ago

That is the Vanilla CSS version.

Maybe there is a problem with the SCSS version?

Julie Lewis over 3 years ago

Ah!

I was using

class="columns"

but the css compiled from SASS only defines class="column"

Changing to class="column" works.

Lynda Spangler over 3 years ago

That sounds like a bug or a problem as columns should also work.

Julie Lewis over 3 years ago

I filed it as an issue. Thanks for your help!

Julie Lewis over 3 years ago

I filed it as an issue.

Nit problem with SASS version of "unstack" in flex grid #7973

Thanks for your help!

Rafi Benkual over 3 years ago

@Julie Lewis Are you using the production flag? How are watching for Sass changes? It would help us get to the bottom of this.

Julie Lewis over 3 years ago

I responded to you on github.

I don't think I set a production flag anywhere and my gulpfile.js does not have UnCSS in it. It's a pretty vanilla one I got from YETI and then added my css path.

Foundation watch wasn't really working so I'm running it using "npm start"