Excesso de espaço em branco acima da barra de administração no frontend usando o Twitter Bootstrap

2

O problema (excesso de espaço em branco acima da barra de administração no front-end usando o Twitter Bootstrap):

Enquanto logado e visualizando o frontend - Se você diminuir o seu navegador, há uma quantidade excessiva de espaço em branco que aparece acima da barra de administração. Eu notei que está tudo bem em tela cheia e até mesmo tamanho de tablet. No entanto, quando prestes a encolher para algo menor que cerca de 600px, é quando o espaço em branco aparece ABAIXO da barra de administração. Eu testei no meu telefone e o espaço em branco também está no meu telefone.

A pergunta:

Este é um problema conflitante com o WordPress, ou há algo que eu precise fazer com minha configuração do Twitter Bootstrap?

Qualquer conselho sobre como eliminar esse excesso de espaço em branco acima da barra de administração enquanto visualiza o frontend (usando o Twitter Bootstrap - Responsivo) em um dispositivo móvel seria muito apreciado.

    
por Michael Ecklund 18.02.2014 / 18:49

2 respostas

10

Eu acabei de me deparar com essa questão também, a causa disso é que, com 600 pixels de largura, a barra de administração passa de posição: fixa para a posição: absoluta;

Quando corrigido, ele é bloqueado na parte superior da tela (superior: 0)

Quando absoluto, ele é bloqueado no topo do contêiner mais próximo que o contém. Este é o elemento html por padrão, mas se um pai é definido para ter uma posição, (no nosso corpo caso tem uma definição de posição), então ele irá conter todos os seus filhos, e suas regras de posição serão baseadas fora de sua posição. Como o elemento html tem um top de margem de 46 pixels, ele reduz o tamanho do corpo em 46 pixels. Então, como o corpo é empurrado para baixo por 46 pixels, o melhor que a nossa barra de administração pode alcançar é o topo do nosso corpo, e não o topo da página.

Se você precisa ter posição: parente no corpo, então você pode fazer algumas coisas para contornar isso. Você pode adicionar qualquer uma dessas regras ao seu arquivo css de temas e ele irá sobrescrever o padrão wordpress css.

  1. Você pode sobrescrever a regra absoluta de posição da barra de administração e voltar a corrigi-la. Isso fará com que a barra de administração role com a página para que você sempre a veja no topo, não importa onde você esteja na página.

    html #wpadminbar{position:fixed};

  2. Você pode alterar a posição da barra de administração para ter um máximo de -46px em resoluções abaixo de 600px; Isso mantém a barra na parte superior da página em telas pequenas para que ela não ocupe a tela ao longo de sua rolagem.

    @media screen and (max-width:600px){html #wpadminbar{top:-46px}}

por Jacob Swain 21.02.2014 / 23:25
0

Era algo simples. Eu tinha position: relative; definido para o body .

Exemplo:

body {
    position: relative;
}

Não sei por que isso afetaria, mas a eliminação de position: relative; para a tag <body> corrigiu o excesso de espaço em branco acima da barra de administração no frontend, enquanto o tamanho do navegador é < 600px.

    
por Michael Ecklund 18.02.2014 / 19:58