Menu icon Foundation
Media Queries Not Working Correctly

I am trying to use the F6 breakpoint mixin, but the breakpoint values do not seem to be applied correctly.

Here's what I have in app.scss to style labels in a menu:

article.home ul.vertical a.main-label {  
        @include breakpoint(small only) {
            @include fluid-fonts(7vw);
        }
        @include breakpoint(medium only) {
            @include fluid-fonts(5vw);
        }
        @include breakpoint(large only) {
            @include fluid-fonts(3vw);
        }
        @include breakpoint(xlarge up) {
            @include fluid-fonts(2vw);
        }
    }

 Fluid-fonts is a simple 'responsive' fonts mixin that looks for a single value.

When resizing the viewport, the font sizes do not respond correctly. The same is true when I use Developer Tools to apply a specific viewport width using its device mode.

I've tried various syntax (i.e. breakpoint(small) vs. breakpoint(small only) with no change in behavior.

I have included the xlarge and xxlarge classes in the _settings.scss $breakpoint-classes variable, and have not altered the $breakpoints pixel values for each names breakpoint.

Any ideas on what the issue here could be?? 

mixinsbreakpoints

I am trying to use the F6 breakpoint mixin, but the breakpoint values do not seem to be applied correctly.

Here's what I have in app.scss to style labels in a menu:

article.home ul.vertical a.main-label {  
        @include breakpoint(small only) {
            @include fluid-fonts(7vw);
        }
        @include breakpoint(medium only) {
            @include fluid-fonts(5vw);
        }
        @include breakpoint(large only) {
            @include fluid-fonts(3vw);
        }
        @include breakpoint(xlarge up) {
            @include fluid-fonts(2vw);
        }
    }

 Fluid-fonts is a simple 'responsive' fonts mixin that looks for a single value.

When resizing the viewport, the font sizes do not respond correctly. The same is true when I use Developer Tools to apply a specific viewport width using its device mode.

I've tried various syntax (i.e. breakpoint(small) vs. breakpoint(small only) with no change in behavior.

I have included the xlarge and xxlarge classes in the _settings.scss $breakpoint-classes variable, and have not altered the $breakpoints pixel values for each names breakpoint.

Any ideas on what the issue here could be?? 

Rafi Benkual about 3 years ago

The includes are correct. As long as the names match the names in the breakpoint map, it should work:

$breakpoints: (
  small: 0px,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

Are you getting any Sass errors in the terminal?

Can you see if the fluid fonts are imported correctly? Do they work outside a media query?

Wesley Picotte about 3 years ago

Thanks Rafi --

Fluidfonts works outside media queries as expected, and I have no SASS errors.

I've created a second post to address a broader scope of inconsistencies I've encountered when applying breakpoints to individual elements -- maybe you could take a look? If questions posed there are answered, that would clarify any issues described here.

http://foundation.zurb.com/forum/posts/44092-foundation-6-media-query-inconsistency