0

Tenho um site publicado e ele está apresentando uma rolagem lateral na versão responsive quando acessado via iPhone que não existe em mais nenhum dispositivo. Tanto no Safari quando no Chrome se acessado via iPhone. Dispositivos Android funcionam normalmente.

Eu já testei várias soluções como essa, não funcionam. Adicionei um container em volta de todo o conteúdo pra tentar dar overflow-x: hidden e não respeita. Tentei adicionar via javascript largura máxima = largura do dispositivo. Nada.

Removi parte por parte do código pra ver o que gera rolagem e basicamente é tudo que tá no centro mesmo, possivelmente tem a ver com os carrosséis. Também tentei dar overflow-x: hidden neles, overflow: hidden, tamanho fixo e etc. Nada funciona.

Não sei mais o que fazer. Alguém passou por isso?

6
  • Para fins de teste, tenta isso no seu CSS: *{ overflow-x: hidden !important; }.
    – Meu ovo
    6/03/2019 às 21:20
  • Testou comentando ou retirando o carrossel para ver se o problema eh com ele mesmo?
    – hugocsl
    6/03/2019 às 22:12
  • Oi @Sam, sim. Já havia testado, não funciona. 7/03/2019 às 11:57
  • @hugocsl sim, Hugo. Já fiz isso. O carrossel e o ScrollReveal tão gerando essa rolagem lateral. 7/03/2019 às 12:08
  • 1
    @hugocsl Obrigada por tentar ajudar de qualquer forma :) 7/03/2019 às 13:13

1 Resposta 1

2

Haviam 3 problemas relacionados ao overflow de conteúdo.

  1. O primeiro estava relacionado a biblioteca owlCarousel. Tive de adicionar largura fixa em pixels (estava usando percentual 100% do container) no responsive.
  2. O segundo era relacionado ao botão de subscribers do youtube que estava incorporado no código. Tive de adicionar overflow:hidden no container de fora do botão.
  3. O último relacionado a biblioteca scrollReveal. Analisando essa issue tentei resolver via CSS adicionando overflow-x: hidden para todos os elementos que estavam deslizando da esquerda ou da direita. Não funcionou. Então removi esse tipo de efeito em resoluções menores. Como ele estava sendo acionado por uma class, resolvi via jQuery

    if($(window).width() < 680) { $('.rightShow').removeClass('rightShow'); $('.leftShow').removeClass('leftShow'); }

Sei que se trata de problemas muito específicos e relacionados ao meu projeto, mas decidi publicar a resposta e manter o artigo para, eventualmente, dar uma "luz" para que tiver problemas parecidos. Possivelmente estarão relacionados a códigos incorporados.

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 .