how to write css for a specific breakpoint in angular material

Question

I am trying to write CSS for a div, that should apply only when a particular breakpoint is hit, eg. sm, md or lg.

I\'m using angular-material (https://material.angularjs

Answer 1

Adding custom css to a tag using material breakpoints, Say suppose i have a custom css like below:

.textLeft{
text-align: left;
margin-left: 24%;
}

and you wanted to add it to a h3 tag if it is a not a mobile device, then follow the below steps.
1. Add ngMaterial to module.

var app = angular.module('MyApp',['ngMaterial']);

2. inject $mdMedia to controller

app.controller('TabCtrl', ['$scope','$mdMedia', function($scope,$mdMedia){
  var thisCtrl = this;
  $scope.$mdMedia = $mdMedia;
}]);

3. Now use the $mdMedia as described by Rob earlier:

   

                        {{user.name}}