-1

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.

sawyer1776
  • 1
  • 1

2 Answers2

0

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;
}
Mohamad
  • 602
  • 2
  • 5
  • 18
0

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

sawyer1776
  • 1
  • 1
  • Can you expand the answer with some code examples? That way it is clearer to other users what they have to do if they encounter this issue. – cloned Sep 02 '22 at 07:44