I recently encountered an issue with the responsiveness of an image on my website. While it displayed correctly on Android and desktop devices, the image appeared distorted on iPhones as if the CSS width attribute was not applied properly. This problem specifically occurred on a web app page which can be viewed online at:
On Android:
https://i.stack.imgur.com/a3Opn.jpg
iOS: https://i.stack.imgur.com/D5FdA.jpg
This is a snippet of my HTML code:
<Row id='client' className='backgroundClient'><img src="/images/bandeauClient.png" /></Row>
<Row>
<Col className="paraClientFaq" xs={12} s={12} md={12}><h1><strong>Clients :</strong>{''}une nouvelle façon de remercier !</h1></Col>
<Col className="paraClientTexteFaq" xs={12} s={12} md={12}><p>Vous avez de - en - de monnaie dans vos poches et la COVID-19 ne vous incite pas à en avoir ! Les restaurateurs n'acceptent que très rarement l'arrondi de l'addition sur le TPE ! Scannez le QR code Tipourboire présent sur votre addition, et donnez le montant de votre choix! Rapide, efficace et sécurisé sans être obligé de vous inscrire, vous aurez la garantie que votre pourboire digital arrivera à votre serveur ou encore à toute l'équipe si vous le désirez !</p></Col>
</Row>
<Row className="rowIconeClient">
<Col md={2} s={6} xs={4} className="blocClient"><img className='img1' src="/images/greeting.png" /></Col>
<Col md={2} s={6} xs={4} className="blocClient"><img className='img2' src="/images/approved.png" /></Col>
<Col md={2} s={6} xs={4} className="blocClient"><img className='img3'src="/images/pouce.png" /></Col>
</Row>
Below is a portion of the CSS related to this issue:
.FAQ .paraClientFaq{
margin-top: 10%;
margin-bottom: 3%;
text-align: center;
color: #f5a624;
}
.FAQ .paraClientTexteFaq{
text-align: center;
padding-left: 15%;
padding-right:15%;
font-size: 22px;
}
.FAQ .blocClient img{
width:100%
}
.FAQ .rowIconeClient{
text-align: center;
justify-content: center;
margin-top: 3%;
margin-bottom: 5%;
}
.FAQ .paraIcone{
color: white;
margin-top:7%;
}
.FAQ .backgroundClient img{
width: 100%;
}