Menu icon Foundation
F6 Small classes Overriding Large Breakpoint

I have it laid out w here I am my intro to the page is being centered within a large-8 and large-centered column, where there is a nested row column with the title, and then another row contai ning the two large-6 columns. 

The problem is the second row, where I have applied a small-10 and small-centered to the first column, and a small-12 column to th e second. When I am in mobile screen size, the columns stack perfectly on top of each other, but in medium and larger, the two large-6 columns break. 

Anyon e with some tips or advice on what I am doing wrong is welcome.

Here is the Codepen link:

foundation 6Small Breakpoint Issue

I have it laid out w here I am my intro to the page is being centered within a large-8 and large-centered column, where there is a nested row column with the title, and then another row contai ning the two large-6 columns. 

The problem is the second row, where I have applied a small-10 and small-centered to the first column, and a small-12 column to th e second. When I am in mobile screen size, the columns stack perfectly on top of each other, but in medium and larger, the two large-6 columns break. 

Anyon e with some tips or advice on what I am doing wrong is welcome.

Here is the Codepen link:

Brandon Arnold about 3 years ago

Since Foundation is built mobile first the small-centered class applies to small screens and UP. Just like the small-6 would be 6 columns on small, medium AND large screens inless overridden. Try using a large-uncentered class to fix your issue. 

Jennifer Tso about 3 years ago

Thanks for the reply! When I first tried applying that fix, it did nothing until I realized it was in a new version of foundation (I am still on 6.0.5). However I was hesitant to update to the new version because I thought it would break my custom version of a full-width megamenu, which basically took the dropdown-panes from the dropdown container component and combined that under a submenu in the top bar.

Do you know if there's a way to modify the current responsive navigation so that when its in medium or larger, the top bar dropdown items with submenus will display in a full-width dropdown?