Grid not working perfectly...

[korndev]

Not really sure if this issue is something FoundationPress is doing or coming from Foundation itself, so I thought I'd start here.

Right now, we have the following for our Footer Widgets:

register_sidebar(array(
  'id' => 'footer-widgets',
  'name' => __( 'Footer widgets', 'foundationpress' ),
  'description' => __( 'Drag widgets to this footer container', 'foundationpress' ),
  'before_widget' => '<article id="%1$s" class="large-3 columns widget %2$s">',
  'after_widget' => '</article>',
  'before_title' => '<h6>',
  'after_title' => '</h6>',
));

It works great with 4 widgets. If a 5th widget is added, the 5th just drops below the 4th and doesn't clear properly.

Similarly, if we update the above to only have 2 columns on medium sizes:

register_sidebar(array(
  'id' => 'footer-widgets',
  'name' => __( 'Footer widgets', 'foundationpress' ),
  'description' => __( 'Drag widgets to this footer container', 'foundationpress' ),
  'before_widget' => '<article id="%1$s" class="medium-6 large-3 columns widget %2$s">',
  'after_widget' => '</article>',
  'before_title' => '<h6>',
  'after_title' => '</h6>',
));

The 3 and 4th widgets just drop below the 2nd and don't clear properly.

To fix this second issue, I can easily add:

@media #{$medium-only}{
    .medium-6.columns:nth-child(2n+1){
        clear: both;
    }
}

Which fixes it, but figured this should be taken into account with the framework.

Any thoughts here? Should I open a ticket with Zurb?

Thanks!

[AdamChlan]

The reason it doesn't clear right is because the standard column class does not clear automatically. Your solution is actually a good direction to go. If you want to make sure things clear using Foundation code, you could modify the widget code to use the block-grid class.

[korndev]

Ah! That makes sense. Thanks, Adam!