Dicas para Blogger 34 - Como remover o espaço em branco na versão mobile

A versão Mobile (para celulares e certos tablets) de seu site ainda é difícil de ser customizada, por isso hoje vamos mostrar mais um tutorial para quem precisa de ajuda, hoje vamos mostrar como retirar os espaços em branco que normalmente ficam entre o título, as imagens e as palavras de sua matéria:

Como remover TODOS os espaços em branco na versão mobile de uma só vez

Esses espaços em branco normalmente acontecem devido a formatação de sua matéria, mas eles normalmente só ficam visíveis na versão mobile do seu site, o que irrita muitos blogueiros por aí, o lado bom é que vamos te ensinar a resolver todos os espaços de uma só vez.
Primeiro entre na sua conta do Blogger, depois clique em "Tema" no lado esquerdo, depois em "Personalizar".

Agora no novo menu você vai clicar em "Avançado", e na flecha ao lado de "Página", nesse novo menu você vai descer até o fim e escolher a opção "Adicionar CSS":

Nesse novo campo você vai colar o seguinte código:

.mobile .post-body a[style*='margin'] {margin-left: auto !important; margin-right: auto !important;}

Esse código vai eliminar os espaços em branco do seu site, mas apenas da versão Mobile. E pronto, basta salvar e ver a diferença... só que... ainda devem ter alguns espaços em branco no seu site.

Esses espaços são causados pelo código br (<br> e <br />) e normalmente eles vem depois do código a, ficando algo como </a><br /><div no seu HTML, para piorar eles também normalmente só ficam visíveis na versão mobile do seu site. Se você quiser resolver esses espaços você tem então duas opções:

Primeiro, entre no seu Blogger, escolha a matéria que você quer arrumar, depois clique no lápis no canto esquerdo e escolha a opção "< >Visualização em HTML". 

Agora basta achar o código br (que se traduz como uma linha de espaço em branco), e deletar ele, indo de algo como </a><br /><div para </a><div. Pronto, a linha invisível foi deletada de todas as versões do seu site.

O problema com isso é que você tem de arrumar todos os espaços em branco manualmente, indo de matéria em matéria, mas existe outro jeito.
Vá novamente para a sua conta do Blogger, depois clique em "Tema" no lado esquerdo, depois em "Personalizar". Mais uma vez no novo menu você vai clicar em "Avançado", e na flecha ao lado de "Página", nesse novo menu você vai descer até o fim e escolher a opção "Adicionar CSS", agora você vai colar esse código aqui:

@media(max-width: 800px) {

 a + br  {

    display: none;

  }

Esse código irá fazer com que todas as tags a seguidas da tags br sejam "deletadas" de qualquer tela menor do que 800 px (você pode mudar o tamanho da tela se quiser).
O problema desse método é que dependendo do quanto seu site já foi customizado, e seu estilo de formatação, você pode acabar deletando coisas que não queria, sem contar que "deletar" a tag a (que é a tag do hyperlink, que é usado para ligar uma página a outra) pode não ser uma boa ideia para você, por isso esse método não é recomendado para todos os blogueiros. Tente adicionar o código e ver se ele funciona para você, se não funcionar basta deletar ele e salvar.

Bom, depois disso tudo fica apenas uma pergunta, de onde vem esses espaços em branco "invisíveis"? Bom, eles são colocados pelo próprio Blogger de forma automática por vários motivos diferentes, incluindo formatação de tag errada, dar espaços com Shift + Enter, tags HTML não suportadas, colar diretamente textos copiados de fontes externas no corpo do editor de postagem e muito mais. Por isso esse tipo de coisa deve acontecer com você em algum momento quer você queira ou não.

Se você chegou até o fim desse tutorial que tal agora dar uma passadinha em nossa página oficial em RWF? Lá você vai encontrar nossas matérias mais engraçadas, artísticas e curiosas. Obrigado pelo seu tempo e até a próxima!