This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
My material design is not responsive on mobile? #1827
Description
<!--index.html-->
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="js/bower_components/angular-material/angular-material.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body layout="column">
<ui-view></ui-view>
<!-- Angular Material Dependencies -->
<script src="js/bower_components/angular/angular.js"></script>
<script src="js/bower_components/angular-animate/angular-animate.js"></script>
<script src="js/bower_components/angular-aria/angular-aria.min.js"></script>
<script src="js/bower_components/angular-material/angular-material.js"></script>
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/libs/angular-sanitize.js"></script>
<script src="js/app.js"></script>
<script src="js/factory.js"></script>
<script src="js/controller.js"></script>
<script src="js/routes.js"></script>
</body>
</html><!--home.html-->
<div layout="row">
<md-toolbar>
<h1>App Header</h1>
</md-toolbar>
</div>
<div layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
<md-list>
<md-item>
<md-button>
All
</md-button>
</md-item>
<md-item ng-repeat="term in terms">
<md-button ng-show="term.count">
<span ng-bind-html="term.name"></span>
</md-button>
</md-item>
</md-list>
</md-sidenav>
<md-content layout="column" class="md-padding" flex>
<md-grid-list md-cols="3" md-cols-sm="1" md-cols-md="2" md-gutter="1em" md-row-height="1:1">
<md-grid-tile ng-repeat="post in posts" md-rowspan="2" md-colspan="1">
<md-card>
<!--<a href="#" title="{{post.title}}" ng-click="toggleRight(post)">-->
<!--<img src="{{post.featured_image.attachment_meta.sizes.medium.url}}">-->
<!--</a>-->
<md-card-content>
<h3 class="mb-post-title" ng-bind-html="post.title"></h3>
<div class="mb-post-excerpt" ng-bind-html="post.excerpt"></div>
</md-card-content>
</md-card>
</md-grid-tile>
</md-grid-list>
</md-content>
</md-content>
<md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right" md-is-open="false">
<md-card>
<img src="{{post.featured_image.attachment_meta.sizes.medium.url}}">
<md-card-content>
<h3 ng-bind-html="post.title"></h3>
<div ng-bind-html="post.content"></div>
</md-card-content>
</md-card>
</md-sidenav>
</div>