CSS shows different on different Androids phones


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.


      <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">

.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);