Need assistance with adding padding to md-card in angular2 material. I am using md-card to display my product list but struggling to add padding on them. Here's what I have tried:
product.component.html :
<p>
Product List
</p>
<div class="container">
<div class="col-sm-2 filter-area">
<div>Filter area</div>
<div>Search area</div>
<div>Category area</div>
<div>Widget area</div>
</div>
<div class="col-sm-10">
<md-card class="example-card" *ngFor="let data of (myData ? myData.slice(0,5): []); let i = index">
<img md-card-image src="{{ data.url }}">
<md-card-header>
<md-card-title>{{ data.title }}</md-card-title>
</md-card-header>
<md-card-actions>
<button md-button>Add to Cart</button>
<button md-button>Buy Now</button>
</md-card-actions>
</md-card>
</div>
</div>
and here is my product.component.ts :
myData: Array<any>;
constructor(private http:Http) {
this.http.get('https://jsonplaceholder.typicode.com/photos')
.map(response => response.json())
.subscribe(res => this.myData = res);
}
that's how i showing my JSON data, it's a sample JSON data that i use to prototype my design. Below is 5 json data that i use (if you trigger the url in my constructor it should appear like below) :
[
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "http://placehold.it/600/92c952",
"thumbnailUrl": "http://placehold.it/150/92c952"
},
{
"albumId": 1,
"id": 2,
"title": "reprehenderit est deserunt velit ipsam",
"url": "http://placehold.it/600/771796",
"thumbnailUrl": "http://placehold.it/150/771796"
},
{
"albumId": 1,
"id": 3,
"title": "officia porro iure quia iusto qui ipsa ut modi",
"url": "http://placehold.it/600/24f355",
"thumbnailUrl": "http://placehold.it/150/24f355"
},
{
"albumId": 1,
"id": 4,
"title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
"url": "http://placehold.it/600/d32776",
"thumbnailUrl": "http://placehold.it/150/d32776"
},
{
"albumId": 1,
"id": 5,
"title": "natus nisi omnis corporis facere molestiae rerum in",
"url": "http://placehold.it/600/f66b97",
"thumbnailUrl": "http://placehold.it/150/f66b97"
}
]
and here is my css file, product.component.css :
.example-card {
width: 220px;
float: left;
padding: 30px;
}
.filter-area {
background-color: peachpuff;
}
and here is my application screenshot : https://i.sstatic.net/yoIpx.png
how can I successfully add padding there?