How to use media breakpoints in components?

web
mobile

Topic: How to use media breakpoints in components?

webteam@rbfcu.org asked 2 years ago

Hello,

I'm trying to use MDB media breakpoints inside components which is resulting me an error.

ERROR in ./src/app/main/main.component.scss
Module build failed:
@include media-breakpoint-up(xs) {
^
No mixin named media-breakpoint-up
in C:Repositoriesnbo-clientsrcappmainmain.component.scss (line 1, column 10)

How to add media breakpoints inside components with mdb?

 

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

@include media-breakpoint-up(xs) {
.arrow_box {
display: none;
}
.main-container{
margin-top: 6em;
}
}

 


vjaromij pro answered 2 years ago

Hi, I have exactly the same question as I want to use breakpoint in Angular component. But moreover I ask why cannot we use the same syntax as for the official bootstrap? mixins, variables, colors, etc. should work more or less the same in MDB as in bootstrap? Ex in bootstrap:
a.zocial {
  font-size: 1em;
  margin-bottom: 10px;
  @media (max-width: @screen-xs-max) {
      font-size: 0.75em;
  };
}

Damian Gemza staff answered 2 years ago

Guys, Please add this code to your global stylesheet - styles.scss and try one more time:
@import "../node_modules/bootstrap/scss/mixins";

@import "../node_modules/bootstrap/scss/functions";

@import "../node_modules/bootstrap/scss/variables";

@include media-breakpoint-up(xs) {

.navbar {

background-color: red!important;

}

}
Let me know if this works to you. Best Regards, Damian

webteam@rbfcu.org commented 2 years ago

Thanks for your reply Damian. Media break points are working in styles.scss .Can we define mixins,functions,variables in global level and use them in components without specifying them in each component? Thanks

Damian Gemza staff commented 2 years ago

If you need overwrite some Bootstrap styles, or use mixins from Bootstrap in component stylesheet instead of global stylesheet, you need to use encapsulation: ViewEncapsulation.None in your component.ts file right beneath styleUrls. Here's an example: @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], encapsulation: ViewEncapsulation.None }) Best Regards, Damian

webteam@rbfcu.org commented 2 years ago

Thanks for your reply Damian. encapsulation: ViewEncapsulation.None didn't work can you provide any sample workaround? Thanks

Damian Gemza staff commented 2 years ago

Are you sure, that you're doing everything in right way? You have to add in your component.scss stylesheet path to ng-mdb-pro/assets/scss/bootstrap/mixins, /functions and /variables, and they use encapsulation: ViewEncapsulation.None in component.ts file.

Please insert min. 20 characters.
Status

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No