Images not responding to media queries on IOS devices-CodePudding

Hi I built a site and everything seems to be working except the main Hero image shows up stretched on IOS devices. When I use dev tools to emulate these devices I don't have any issues, just on the actual devices. I have not had any issues with Android devices or desktop.

code https://github.com/sawyer1776/whale-animation

screenshot of stretched image

I'm not really sure where to start trouble shooting since when I try to simulate these devices with dev tools everything looks fine.

CodePudding user response：

try this:

Give The section the height of 100vh and the hero content height 100%

hero-section {
    height: 100vh;
}

.hero-content {
    background-image: linear-gradient( to bottom, #04062e00, #04062e1e, #04062e86, #04062e ), url(../img/hero-bg.jpg);
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

CodePudding user response：

I found the answer here: Image stretching out only on iPhone x

sorry I thought I had searched extensively

Defining a width fixed the issue. Notably the issue was occurring on IOS devices across multiple browsers, not just Safari