Dear All.
I am putting together a web page for a personal project. This page has a cover image in a div that takes up the full width of the screen. My problem appears when I enter this page from an iPhone, the image is not displayed correctly. Only part of the image is visible, as if the image was not resized correctly on the screen. The funny thing is that it only happens on iPhone. From the mac, opening it in any browser emulating the screen of a phone looks correctly, the same happens when I see the page from a mobile with Android. The problem only appears on iPhone and I can't figure out what's going on.
I leave some screenshots for you to review the code.
Index:
Image CSS
Responsive CSS