1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: How to use media breakpoints in components?

webteam@rbfcu.org free asked 6 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;
}
}


 


                
                  

                
                
                

                  
                  
                  
                    

                    

                      
                        
                      
                    

                  
                

                
              

              
              
            

            
            
              
                
                
                

                  
                  

                    

                      
                      Damian Gemza
                      staff
                        answered 6 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
                              free
                              commented 6 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 6 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
                              free
                              commented 6 years ago
                              
                            

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

                          
                        
                          
                          
                          
                            

                              Damian Gemza
                              staff
                              commented 6 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.
                          
                          
                          
                        
                      
                      
                        
                          

                        
                        

                          
                            
                          
                        

                      
                    

                    
                  

                  
                

                
              
                
                
                

                  
                  

                    

                      
                      vjaromij
                      pro
                        answered 6 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;


  };


}







                    
                      

                    
                    
                    

                      
                      
                      
                        
                        

                          
                            
                          
                        

                      
                    

                    
                  

                  
                

                
              
            
            
              
              

                
                

                  

  
  
  
  


                

                
                
                

                  
Write

                  
                     Create snippet
                  
                

                

                
                

                  

                    
                    

                      
                      
                      

                      

                        Please insert min. 20 characters.
                      

                      

                        
                          
                        
                      

                    

                  

                

                
              

              
            
          

          
          
          


            

  
  

    

      
FREE CONSULTATION

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

    

  

  





  

    

      
      
      
      
      
    

  

  
  

  




            
            

              
              
Status

              

              
              

                

                  

                    
                    
                  

                  
                

                
              

            

            

            
            
            

              
              
Specification of the issue

              

              

                
    
                  
  • 
                    ForumUser:
                    
                      Free
                    
                  
    • 
                  
  • 
                    Premium support:
                    
                      No
                    
                  
    • 
                  
  • 
                    Technology:
                    
                      MDB Angular
                    
                  
    • 
                  
  • 
                    MDB Version:
                    
                      -
                    
                  
    • 
                  
  • 
                    Device:
                    
                      -
                    
                  
    • 
                  
  • 
                    Browser:
                    
                      -
                    
                  
    • 
                  
  • 
                    OS:
                    
                      -
                    
                  
    • 
                  
  • 
                    Provided sample code:
                    
                      Yes
                    
                  
    • 
                  
  • 
                    Provided link:
                    
                      No
                    
                  
    • 
                

              

              

              
              
                
                

                  
                  
Tags

                  

                  
                  

                    
                  

                

                
              

              
              
                
                

                  
                  
About author

                  

                  
                  

                    
                  

                  

                    
                    

                      
                        webteam@rbfcu.org
                      
                    

                    
                    
                    

                    
                    
                      65Support score
                    
                    

                    
                      3Questions
                    
                    
                      5Answers
                    

                    
                    
                      0Snippets