Barra de rolagem horizontal no design responsivo

[Tayane Amaral 0]

Boa tarde gente!

 

Estou iniciando os estudos em design responsivo...

Aparentemente deu tudo certo. Meu único problema, é uma barra de rolagem horizontal que está aparecendo em todas as resoluções definidas nas media queries.

 

 

Encontrei este artigo no site do Maujor, que tratava exatamente desse problema:

http://www.maujor.com/tutorial/propriedade-css-width.php

 

 

Eu estava usando width:100%, e substituí por: width:auto;

Porém, o problema não foi resolvido.

 

No código, eu também utilizei: position:absolute;

Não sei se essa também é a causa do problema. =/

 

 

Assim que o tamanho do navegador por dimuniído, a barra de rolagem horizontal já aparece.
Segue aqui o link do meu site...

http://zaarte.com.br/responsivo/index.html

 

(troquei a cor do background em cada classe das media queries para melhor visualização)

 

 

Aguardo a ajuda de vocês!

Obrigada

[Maujor 144]

Oi Tayane,

Testei seu site na última versão do Firefox, Opera e Chrome e no IE10 e em nenhum deles vi barra de rolagem horizontal em
nenhuma largura de janela.

Se você conseguiu resolver, poste o que era e como resolveu para outros que tiverem o mesmo problema saibam a solução.

[Tayane Amaral 0]

Oi Tayane,

 

Testei seu site na última versão do Firefox, Opera e Chrome e no IE10 e em nenhum deles vi barra de rolagem horizontal em

nenhuma largura de janela.

 

Se você conseguiu resolver, poste o que era e como resolveu para outros que tiverem o mesmo problema saibam a solução.

 

 

 

Olá Maujor! Obrigada por ter respondido :)

 

A barra não está aparecendo mais, pois inseri no body: overflow-x: hidden;

 

Mas no mobile o problema ainda persiste :/

Na verdade o que o overflow fez, foi ocultar a barra de rolagem na horizontal. Sendo assim, nos celulares ainda tem rolagem na horizontal :pinch:

[GustavoDose 1]

Tayane o teu problema é que vc esta usando um tamanho que não esta em porcentagem na div #geral_home , vc utilizando overflow hidden nao é o correto a se fazer.

 

se voce colocar na #geral_home o max-width em vez de so width vai resolver teu problema. nesta div esta com width:1400px
coloca max-width:1400px

 

nesta div div_bg_colorido não tem tamanho , se vc colocar tamanho tambm ira tirar a barra de rolagem :D

[botasleve 1]

Oi,

Bem veja se tem padding, margin, e tente remover algumas para ver se some a barra dai você vai ver "aham aqui esta o problema".

 

Isso de barra de rolagens pode acontecer por coisas tão insignificantes, uma borda de 1px etc...

 

http://muraio.url.ph/area/

aaaaaaah, maravilha. Por falta de atenção mandei tudo errado o que era pra mandar pra você mandei no outro tópico.

Ah DDA... Bem, vou dar uma olhada no CSS desse seu site ai e vou ver onde esta o erro :B

 

Se você resolver antes de mim poste aqui por que estava dando o problema talvez ajude um futuro leitor ;)

[FelipeSAMA 1]

Como diziam os camaradas, deve ser um problema de padding, pois o padding aumenta o tamanho do seu div. Se por exemplo temos um div com width:100% e padding:5% , o tamanho estoura, e fica equivalente a width:105%.

 

Basta fazer um teste, coloque o seguinte na sua folha de estilo:

* {
  padding: 0 !impotant;
}

Isso faz com que todos os divs e tags tenham padding zero e o !important força para que esse comportamento sobrescreva todos os outros e se torna prioridade.

 

Com isso você perceberá que se trata do padding lateral. O único jeito de consertar é debbugar linha por linha e ver o que está acontecendo de errado. Geralmente quando isso acontece eu costumo deixar todas as linhas de padding comentadas /* comentário */ epois vou tirando uma por uma e dando f5 até descobrir.

 

Espero que isso te ajude!