How to use media-breakpoint ?


Topic: How to use media-breakpoint ?

karminek asked 5 years ago

Hello, I need elementary support;) As an example, how do I use https://mdbootstrap.com/docs/angular/layout/media-queries/

// Example usage:

@include media-breakpoint-up(sm) {

.some-class {

display: block;

}

}

it gives a error

ERROR in ./src/custom.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/custom.scss) Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@include media-breakpoint-up(sm) { ^ No mixin named media-breakpoint-up


Arkadiusz Idzikowski staff answered 5 years ago

Please add the sass imports before using the media query mixin. We updated the documentation page because this code wasn't included before.

@import '~ng-uikit-pro-standard/assets/scss/core/colors';
@import '~ng-uikit-pro-standard/assets/scss/core/variables';
@import '~ng-uikit-pro-standard/assets/scss/core/variables-pro';
@import '~ng-uikit-pro-standard/assets/scss/bootstrap/functions';
@import '~ng-uikit-pro-standard/assets/scss/bootstrap/variables';
@import '~ng-uikit-pro-standard/assets/scss/core/mixins';

@include media-breakpoint-up(sm) {
     .some-class {
        display: block;
      }
 }

karminek commented 5 years ago

thank you Arkadiusz;)


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.7.0
  • Device: desktop
  • Browser: chrome
  • OS: macos
  • Provided sample code: No
  • Provided link: Yes
Tags