1

Boa noite, pessoal.

Recentemente terminei este blog: http://bloganacastro.com/ e está tudo legal, na versão mobile apenas estou com um probleminha.

Se acessarem, poderão ver que a coluna principal, dos posts, fica menor que o tamanho total da página. De resto, a versão mobile funciona perfeita. Já tentei alguns códigos e não consigo resolver.

Se conseguirem ajudar, fico grato!

2 Respostas 2

0

Bom dia, vi que vc definiu largura para .sidebar.col-md-4 e .conteudo.col-lg-8. As classes "col-*" ja possuem tamanho definido pelo Bootstrap, o certo seria vc seguir esta parte da documentação http://getbootstrap.com/css/#grid definindo as classes do seus elementos para as diferentes resoluções , por exemplo .col-xs- .col-sm- .col-md- .col-lg- . Observando seu codigo, sugiro retirar a propriedade width:60% de .conteudo.col-lg-8 e acrescentar a classe .col-xs-12 para que o conteúdo ocupe todas as colunas na resoluções <768px. para ocultar a sidebar vc pode seguir http://getbootstrap.com/css/#responsive-utilities. Espero ter ajudado

1
  • Rafael, muito obrigado! Sou novo no Bootstrap e agora entendi melhor, resolvi o problema! Commented 13/05/2015 às 0:54
0

Isso está acontecendo porque você remove a barra lateral mas não aumenta o tamanho do conteúdo. Provavelmente sua regra CSS deve estar assim:

@media screen and (max-width:1119px){
    div.sidebar.col-md-4 {
        display:none;
    }
}

Altere também a largura da coluna das mensagens, ficando assim:

@media screen and (max-width:1199px){
    div.sidebar.col-md-4 {
        display:none;
    }

    div.conteudo.col-lg-8 {
        margin-right: 4%;
        width: 100%;
    }
}

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 .