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??
The includes are correct. As long as the names match the names in the breakpoint map, it should work:
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?