Overlapping of buttons Ionic Framework

I am new to developing in ionic framework. i have created a page with image buttons using the grid layout. but the overlap each other.

this is my code:

  <center>
  <br>
  <div class="row">
  <div class="col ">
  <a class="button button-clear" href="#/app/deals">
  <img src="img/bagnew.jpg" width="70%">
  </a>
  </div>
 <div class="col">
<a class="button button-clear" href="#/app/search">
<img src="img/search.jpg" width="70%">
</a>
</div>
</div>
</center>
<center>
<div class="row">
<div class="col ">
<a class="button button-clear" href="#/app/favourites">
<img src="img/star.jpg" width="80%" >
</a>
</div>
<div class="col">
<a class="button button-clear" href="#/app/news">
<img src="img/paper.jpg" width="70%" >
</a>
</div>
</div> 
</center>

the star and paper images buttons overlap half of the bagnew and search image buttons.

please help. thank you

Ionic has built-in css classes to use while loading images, you can try out the class item-image to the div that renders the image. Modified code

  1. to include col-50 for two column grid and
  2. item-image to render image within a column.
  3. removed width specified for img tag

The entire changed code as follows:

<div class="row">
 <div class="col col-50 item-image ">
  <a class="button button-clear" href="#/app/deals">
   <img src="img/bagnew.jpg">
  </a>
 </div>
 <div class="col col-50 item-image">
  <a class="button button-clear" href="#/app/search">
   <img src="img/search.jpg">
  </a>
 </div>
</div>
<div class="row">
   <div class="col col-50 item-image ">
    <a class="button button-clear" href="#/app/favourites">
     <img src="img/star.jpg">
    </a>
   </div>
   <div class="col col-50 item-image">
    <a class="button button-clear" href="#/app/news">
      <img src="img/paper.jpg">
    </a>
  </div>
</div>