I am facing an issue with the responsiveness of a website I am working on, specifically on iPhones. The website is built using Bootstrap 5 and appears to be functioning correctly on Android phones as well as in Chrome Dev Tools. However, when I test it on iPhones, certain elements do not display properly.
To provide a visual representation of the problem, please find below a couple of screenshots illustrating the issue:
| Android | iPhone |
|---|---|
 |
 |
The issue seems to be related to how the website’s layout and components are rendered on iPhones. The elements do not align correctly, and the overall layout appears distorted. This behavior is not observed on Android devices or when using Chrome Dev Tools to simulate different mobile devices.
If you want to see the website by yourself this is the page: https://sbriser.com/universo/personaggi/Sbriser
I have already tried some troubleshooting steps like the following:
Ensured that I am using the viewport meta tag in the HTML <head> section:
html
Despite these attempts, the responsiveness issue persists on iPhones. I suspect there might be some CSS conflict or specific iPhone-related styling that I am overlooking.
If anyone has encountered a similar problem or has expertise in Bootstrap 5 and responsive web design, I would greatly appreciate your guidance and assistance. Are there any additional CSS rules or JavaScript tweaks that could help ensure proper responsiveness on iPhones?
Thank you in advance for your time and expertise.