CODEWITHSUNDEEP
angularjsmaterial-designangular-material
Volleyball Player
Volleyball Player

Reputation: 338

Responsive divs in angular material

I am not able to make the divs responsive. How do I make them responsive? The content boxes should appear one below the other when size is reduced. Below is the code that is taken from an another codepen and angular material website. 

         <h1>User List</h1>
  <div class='md-padding' layout="row" flex>
    <div layout="row" flex>
      <div class="parent" layout="column" ng-repeat="user in users" flex>
        <md-card>
          <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
          <md-card-content>
            <h2>{{user}}</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
          </md-card-content>
          <div class="md-actions" layout="row" layout-align="end center">
            <md-button>Save</md-button>
            <md-button>View</md-button>
          </div>
        </md-card>
      </div>
    </div>
  </div>

    </md-content>

Link to code pen enter link description here

Upvotes: 0

Views: 8700

Answers (1)

camden_kid
camden_kid

Reputation: 12813

Here's an example of how to do it - CodePen

The information in the docs is quite informative about responsive design.

Markup

    <div class='md-padding' layout="row" flex>
        <div layout="row" layout-xs="column" flex> <!-- define layout here -->
            <div class="parent" layout="column" ng-repeat="user in users" flex>
                <md-card>
                    <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
                    <md-card-content>
                        <h2 class="user">{{user}}</h2>
                        <p class="userInfo">Lorem ipsum</p>
                    </md-card-content>
                    <div class="md-actions" layout="row" layout-align="end center">
                        <md-button>Save</md-button>
                        <md-button>View</md-button>
                    </div>
                </md-card>
            </div>
        </div>
    </div>

Upvotes: 3

Related Questions