3

Eu tenho uma div que é um celular e quando vou descendo a pagina executa a animação porem antes de executar a animação essa div ta ficando fora da pagina quebrando todo o layuout

minha div

<div class="col-md-5 ml-auto">
    <div class="iphone-container" style="max-width: 450px !important;" [@scrollAnimation]="state">
        <img src="assets/img/iphone6-2.png">
    </div>
</div>

ela fica com essa faixa branca e em smartphones é bem maior inserir a descrição da imagem aqui

conforme a animação é executada a faixa some pq a imagem fica na sua posição correta colocando overflow: hidden eu consegui limitar o erro mas ai é como se ela saísse do meio da pagina fica feio

inserir a descrição da imagem aqui

1 Resposta 1

2

Acredito que colocar um overflow no eixo X no HTML e no body deve resolver o seu problema.

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
2
  • Funcionou obg mas testando também percebi que se eu colcoar a animação na imagem ao inves de colocar na div toda funciona qual seria o melhor modo? 24/05/2018 às 17:51
  • @GiovanniDias eu particularmente gosto de usar sempre o overflow-x: hidden; pois nunca uso scroll horizontal. Essa classe serve justamente para esconder tudo que seja maior que a largura da tela, evitando o scroll horizontal na janela. Mas se colocando na imagem resolveu as vezes vc não precisa desse artificio do overflow
    – hugocsl
    24/05/2018 às 17:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .