# iPhone não mostra área de imagem corretamente no site. Por quê?

**URL:** <https://meta.discourse.org/t/iphone-not-properly-showing-image-area-on-site-why/301963>\
**Category:** Development\
**Tags:** css\
**Created:** [Abril 1, 2024, 10:50pm UTC](https://meta.discourse.org/t/iphone-not-properly-showing-image-area-on-site-why/301963 "2024-04-01T22:50:59Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![45thj5ej](https://avatars.discourse-cdn.com/v4/letter/4/34f0e0/32.png) [@45thj5ej](https://meta.discourse.org/u/45thj5ej)\
**Post date:** [Abril 1, 2024, 10:50pm UTC](https://meta.discourse.org/t/iphone-not-properly-showing-image-area-on-site-why/301963/1 "2024-04-01T22:50:59Z")

</div>

Então, em 3 dos meus telefones Android (marcas diferentes, etc.), uma das minhas páginas da web fica assim (como deveria ser):

 ![androidex](https://global.discourse-cdn.com/meta/original/4X/4/1/1/411264cad903541354de7e4cf2c8a85ce25c56ab.jpeg)

No iPhone do meu parceiro, no iPhone de um membro da família e no iPhone de um amigo, fica assim:

 ![iphoneex](https://global.discourse-cdn.com/meta/original/4X/a/5/c/a5c939b463ad60fe447fd0b47538bcc2e6f9cf6c.jpeg)

Meu arquivo SCSS móvel que renderiza a área da imagem superior é:

```plaintext
body.landing-page {
  &.blog {
    > .contents {
      max-width: 100%;
      width: 100%;
      display: block;
      padding: 1em;

      .page-first {
        display: none;
      }
    }
    .mobile-header .menu {
      background-color: #4a4a4a !important;
/* height: min-content; */
    }
    
    .topic-list {
      grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
      padding: 2em 0 0 0;

      .topic-byline {
        .bull {
          padding: .2em .5em;
        }
      }
    }
  }

  .canvas {
    padding: 0.8em !important;
}

  .bull {
    display:none
    }

  &.blog-post {
    header {
      background-color: $secondary;
    }

    .container {
      width: 100%;
    }

    .post-container {
      width: 100%;
    }
    
    .title-container {
      background: no-repeat center/cover fixed;
      display: flex;
      flex-direction: column;
      min-height: 530px;
      max-height: 40%;
      justify-content: flex-end;
      align-items: center;

      .title {
        font-size: 2.0em !important;
        width: 100%;
        text-align: center;
/* margin: 0 0 1em 0; */
      }

      .topic-byline {
        flex-direction: column;

        .bull {
          padding: .2em 1em;
        }
      }
    }

    img {
      max-width: 100%;
      height: auto;
    }
    
    .comment-container {
      .comment-heading h4 {
        text-align: center;
      }

      .comment-footer {
        padding: 0 2em;
        box-sizing: border-box;
        justify-content: center;
      }
    }
  }

  &.blog,
  &.blog-post {
    .btn-subscribe {
      padding: 0;

      .fixed-avatar {
        width: 60px;
        height: 60px;
      }
    }
  }
}

```

Então, por que em todos os iPhones a imagem não está sendo posicionada corretamente, mas está em vários telefones Android? Como corrijo isso? Fiquei preso nisso por um total de 30 horas. 🙃 Coisa estranha é que, também, no meu Elemento de Inspeção, ele está mostrando bem lá também em algumas predefinições de iPhone que ele tem… mas não nos dispositivos reais deles…

---

_[View the full topic](https://meta.discourse.org/t/iphone-not-properly-showing-image-area-on-site-why/301963)._