-
Replies
I'm using foundation#5.0.2 with sass/compass. I can change variables in _settings.scss like colours and so on, but seems I can't changing Media Query Ranges. It doesn't take effect.
Media Query Ranges
$small-range: (0em, 64em);
$medium-range: (64.063em, 80em);
$large-range: (80.063em, 90em);
$xlarge-range: (90.063em, 100em);
$xxlarge-range: (100.063em);
So, with
$topbar-breakpoint: #{upper-bound($medium-range)};
I would expected the menu collaps at 1024px. But this doesn't happens, still switch at 40em, default foundation settings. Sure it will be some mine mistake, but I'm stuck for the moment. Any help will be appreciated. Thank you in advance.
Rafael Hegre Cabeza
almost 6 years ago
I think I might have found a solution. In you app.scss file, change the order of the imports to:
@import "foundation/settings";
@import "foundation";
Make also sure that all paths are correct.
You can now choose the ranges as wanted.
Paolo Visnoviz
almost 6 years ago
I resolved (not in brillant way) putting "!default" in _global.scss.
// Media Query Ranges $small-range: (0em, 40em) !default; $medium-range: (40.063em, 64em) !default; $large-range: (64.063em, 90em) !default; $xlarge-range: (90.063em, 120em) !default; $xxlarge-range: (120.063em) !default;
Rafael, changin @import sequence priority doesn't work for me.
dave vanderkloot
almost 6 years ago
having the same problem; using the gem, and 5.0.2. can't customize the breakpoints/media queries. everything uses the small by default.
Clement
almost 6 years ago
If you're having the same issue i was, the answer is simple but not evident: it's not enough to change the media query ranges, you ALSO need to leave the following uncommented underneath (even if you don't alter the default!)...
$screen: "only screen"; $landscape: "#{$screen} and (orientation: landscape)"; $portrait: "#{$screen} and (orientation: portrait)"; $small-up: $screen; $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"; $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"; $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"; $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"; $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"; $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"; $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"; $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"; $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
dave vanderkloot
almost 6 years ago
AND you have to uncomment this line:
@import "foundation/functions";
Patrick Whitty-Clarke
almost 6 years ago
If you still have to do this why hasn't the documentation been updated?
Seth Hall
over 5 years ago
I am experiencing weird behavior with media queries as well.
Here is my import order.
@import "_settings.scss"
@import "foundation"
* which automatically @import "_global"
my custom _settings.scss
is first because foundation
relies on it.
foundation
is next, which automatically imports _global.scss
My problem is this:
My custom media queries, which includes a media-query AND legacy code rewrite to adapt to my current project, are in _settings.scss
, but the legacy code is first called in _global.scss
, which means there are conflicts.
The legacy code appears in foundation/settings
, which I copied and pasted into my _settings.scss
to use the $variables in my custom rewrite, so in theory it should not be overridden in _global.scss
, since it appears in foundation/_settings.scss
.
Commenting out legacy code in _global.scss
is a quick hack to fix, but will we broken/reversed upon Foundation update, so not ideal.
Anyway, I ramble :) Posting in hopes of helping the community.
Uzi Ashkenazi
about 4 years ago
Still an issue for me with Foundation 5.5.3. It seems that the need to be "fancy" with media queries calculation is coming back to hunt us all. Why can't it just be straight value or a variable string? Yes, I love em-calc and rem-calc works even better but top bar media query issue has been around since Foundation 4 and is one of the most noticeable feature on RWD.
P.S. I tried every possible solution suggested in the many top bar threads, none resolve the issue. I honestly think that a better way to approach this would be to provide an always mobile setting and let everyone use visibility classes to hide/show the top bar.
The strange part is that if I comment the $topbar-breakpoint and $topbar-media-query I get the uncollapsed version of the top bar but as soon as I make any adjustments to these variables or to the Media Query Ranges, the menu items (top-bar-section) disappear and the only visible items are the .top-bar and .title-area...
Anyone came across a similar issue?
Uzi Ashkenazi
about 4 years ago
Last comment on this thread solved my issue. Hope this helps someone. http://foundation.zurb.com/forum/posts/1483-customize-topbar-breakpoint-in-scss
Yep, these variables are broken and currently don't seem to do anything. :\