Iam a Developer Iam a Developer - 5 months ago 121x
AngularJS Question

How to make <img> and <md-card> responsive in angular Material?

I'm displaying dynamic content by looping with

tags. My output is not responsive on tablet or mobile screens, showing a scrollbar instead of the next line. What's wrong with my code and how can I make it responsive?

<p>Show Menus</p>
<div layout="row" layout-margin >
<md-card ng-repeat="menu in sampleMenus">
<img src="http://placehold.it/350x150" class="md-card-image" alt="image caption"/>
<md-card-content >
</md-card >

Screenshots: Desktop View

![Tab View and mobile nearly same


This may help your cause.
http://codepen.io/sstorie/pen/myJWxQ The key is those two classes added to the parent and the img in each card

.parent {
  overflow: hidden;

.card img {
  width: 100%;
  height: auto;