scss – media query not detecting width – Html

Unfortunately, I’m not well-versed in Sass mq’s using breakpoints and mixins together enough to tell you why yours isn’t working, but I think I can build you a version that does work. what’s not working could be a few things: I’m honestly not sure if you can have one-character mixins, but I could be pulling that out of my rear-end. I think your main problem may be that the s, m, and l variables aren’t declared before your mixins, but I could also be wrong there.

Instead of trying to declare everything in one mixin using breakpoint, it might be easier to use multiple variables:

$sm: 599px;
$md: 768px;
$lg: 1280px;

then we can declare the mixins:

@mixin small {
  @media (max-width: #{$sm}) {
    @content;
  }
}

@mixin smMd {
  @media (min-width: #{$sm + 1}) and (max-width: #{$md}) {
    @content;
  }
}
@mixin mdLg {
  @media (min-width: #{$md + 1}) and (max-width: #{$lg}) {
    @content;
  }
}

@mixin large {
  @media (min-width: #{$lg + 1}) {
    @content;
  }
}

If you do want to use breakpoint, you need to declare your variable:

$sm: 499px;
$SmMd: 500px 699px;
$MdLg: 700px 999px;
$lg: 1000px;

then you can either use those directly in mq’s:

.class {
  @include breakpoint($SmMd) {
    width: 100px;
  }
}

Or you can go one further like you’re doing above and implement those breakpoints into a mixin… and tbh i never go this far. I always just use breakpoints. Everything I’m about to write is entirely based off of this: https://glennmccomb.com/articles/useful-sass-scss-media-query-mixins-for-bootstrap/

// declare the breakpoints
$breakpoints: (
  xs: 576px,
  sm: 768px,
  md: 992px,
  lg: 1200px
);

// retrieve the breakpoint variable, then declare which value we're using
$breakpoint: map-get($breakpoints, sm);

// using "respond above" meaning "this will activate if the screen is above a threshold" 
// take note of the difference between $breakpoints <- with S and $breakpoint
@mixin respond-above($breakpoint) {

  // If the breakpoint exists in the map.
  @if map-has-key($breakpoints, $breakpoint) {

    // Get the breakpoint value.
    $breakpoint-value: map-get($breakpoints, $breakpoint);

    // Write the media query.
    @media (min-width: $breakpoint-value) {
      @content;
    }

  // If the breakpoint doesn't exist in the map.
  } @else {

    // Log a warning.
    @warn 'Invalid breakpoint: #{$breakpoint}.';
  }
}

/* you can also use respond-below($breakpoint) or respond-between($lower, $upper)

@mixin respond-between($lower, $upper) {

  // If both the lower and upper breakpoints exist in the map.
  @if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {

    // Get the lower and upper breakpoints.
    $lower-breakpoint: map-get($breakpoints, $lower);
    $upper-breakpoint: map-get($breakpoints, $upper);

    // Write the media query.
    @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
      @content;
    }
  
  // If one or both of the breakpoints don't exist.
  } @else {

    // If lower breakpoint is invalid.
    @if (map-has-key($breakpoints, $lower) == false) {

      // Log a warning.
      @warn 'Your lower breakpoint was invalid: #{$lower}.';
    }

    // If upper breakpoint is invalid.
    @if (map-has-key($breakpoints, $upper) == false) {

      // Log a warning.
      @warn 'Your upper breakpoint was invalid: #{$upper}.';
    }
  }
}

Like I said, all of that is copied from the URL above.

I hope it’s helpful. Comment back and tell me if any particular area is tripping you up and i’ll see if I can do a better job explaining it.