Site Scrollando: Como Remover Barra de Rolagem Horizontal no WordPress e Elementor

Esta gostando? Compartilhe

Compartilhar no facebook
Compartilhar no linkedin
Compartilhar no twitter
Compartilhar no email

E se os visitantes do site rolarem a página para a direita ou para a esquerda, o site vai ficar com espaço em branco em uma das laterais e ficará feio. Isso é um erro e precisa ser corrigido.

Veja as demonstrações abaixo de sites scrollando na versão Desktop e na versão Mobile(Celulares).

O primeiro passo é checar se realmente não tem algum(ou alguns) elemento(s) ultrapassando o limite do seu layout. Para verificar isso, arraste a barra inferior totalmente para direita e vai rolando a página par abaixo e/ou para cima para ver se tem algo passando “pra fora”. É o que acontece neste meu exemplo abaixo.

Perceba que a foto da cidade está ultrapassando o Layout, o rodapé acabou e a imagem continua colada na lateral direita. Uma parte dela está “sobrando no layout”.

Geralmente isso acontece quando se usa seções esticadas(largura do conteúdo selecionada em largura total) e alguma margem negativa. Então para remover a barra de rolagem horizontal, ou seja, o scrollamento, basta ajustar a margem negativa. No meu caso eu excluí a margem.
Mas também pode acontecer em seções configuradas com a Largura de Conteúdo em Boxed, como é no meu caso ilustrado na imagem abaixo. Na qual eu utilizei um plugin para personalizar o formulário do Contact Form 7 com o Elementor e um o Widget de um Addon para o Elementor, também para personalizar o Contact Form 7 com o Elementor Website Builder.

Perceba que os botões de “cadastrar” desses dois formulários estão ultrapassando/sobrando no meu Layout na versão Mobile e ainda ficando com um espaço “branco” entra a imagem e a lateral direita.

Isso acontece devido eu ter configurado os botões dos formulários, na versão Desktop do site, em uma largura para que eles ficassem alinhados com a largura do restante dos formulários. E não tinha corrigido essa largura dos botões na versão Mobile do site.

Diminuí a largura dos botões no Mobile e eles pararam de sobrar na tela.

Bom, se você já conferiu o layout do seu site tanto no Desktop quanto no Mobile(acesse site pelo seu celular para conferir) e viu que não tem nenhum elemento “sobrando” ou mesmo viu que tinha e corrigiu, e mesmo assim continua aparecendo a barra de rolagem horizontal inferior, você precisa colocar um código CSS no seu Tema.
body, html {
overflow-x: hidden !important;
}

/Corrigir escrollamento no Mobile/
@media (max-width: 786px){
body, html {
overflow-x: hidden!important;
}
}

Copie este código acima e cole-o no CSS Adicional do seu tema. Dentro do painel administrativo do WordPress, passe o mouse sobre a aba “Aparência” e clique em “Personalizar”, então clique na opção “CSS Adicional”, cole o código e depois clique no Botão “Publicar”.

Agora veja se resolveu o problema do escrolamento, se não tiver resolvido você vai fazer a seguinte configuração em todas as seções do seu site com Elementor: Clica na seção, e na aba “Layout” do Elementor, vá em “Transbordar”, retire de “Default” e coloque em “Oculto”, e salve/atualize. Faça isso para todas as seções do seu site.

Comenta aqui em baixo se você conseguiu resolver e como resolver.

Inscreva-se no canal:

Comente o que achou:

Aproveite e veja também:

Olá, visitante