<div class="card" style="cursor:pointer;cursor:hand;">
  <div class="card-image" (click)="openProductDetails()">
    <img class="product-image" [src]="productService.getLogoUrl(product)">
  </div>
  <div class="card-content" (click)="openProductDetails()">
    <span class="product-title">{{product.title}}</span>
    <span class="product-category">{{product.type}}</span>
  </div>
  <div class="card-action product-action">
    <div class="row">
      <div class="col s8 left-align"><a (click)="openProductDetails()"><stars [stars]="5"></stars></a></div>
      <div class="col s4 right-align"><a (click)="openProductDetails()">VIEW</a></div>
    </div>
  </div>
</div>

<div class="card" style="cursor:pointer;cursor:hand;">
  <div class="card-image" (click)="openProductDetails()">
    <img class="product-image" [src]="productService.getLogoUrl(product)">
  </div>
  <div class="card-content" (click)="openProductDetails()">
    <span class="product-title">{{product.title}}</span>
    <span class="product-category">{{product.type}}</span>
  </div>
  <div class="card-action product-action">
    <div class="row">
      <div class="col s8 left-align" style="padding-right:0;"><a (click)="openProductDetails()"><stars [stars]="5"></stars></a></div>
      <div class="col s4 right-align" style="padding-left:0;"><a (click)="openProductDetails()">VIEW</a></div>
    </div>
  </div>
</div>

Adjust padding on View link so it does not overlap edge of card on some screen sizes.
Adjust padding on View link so it does not overlap edge of card on some screen sizes.
