CSS shows different on different Androids phones

ionic-v1
1

Please, please, what is happening. This is from two different phones (Nexus 5 and Honor7) The Honor shows it wrong
I got feedback from a customer that had downloaded the app from Store, so it’s rather urgent and important. Really hope someone can help me out.

image
full.png311×553 181 KB

image

HTML::

      <div class="small-front-card small-front-card-2">
        <div style="text-align:left;" ui-sref="tabholder.forchildren">
            <img src="img/museum.png" width="100%" height="auto">
        </div>
      </div>
    </div>

CSS:
.small-front-card {
background: #fff;
border-radius: 2px;
display: block;
float: left;
height: auto;
margin: 0.3rem;
position: relative;
width: 50%;
}
.small-front-card-2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}