Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Problema no tamanho do banner no fórum phpBB3 visto no celular

22-04-2015 10:32

Para quem tem fórum phpBB3 ou qualquer outro site responsivo, geralmente coloca no topo um banner do formato 728x90.

Ai acontece que quando o banner é visto em celulares ou tablets geralmente o banner encolhe, tornando quase impossível a visualização do anúncio.

A dica que vou dar é para resolver esse problema. O funcionamento é bem simples. Serão duas divs, uma só vista no site e outra só vista no celular.

O banner para ser visto no site será no formato 728x90 e o banner para ser visto no celular será no formato 320x100.

Primeiro passo, se você usa o adsense, crie 2 blocos de código "se você não tem ainda" nos formatos acima.

Agora você vai precisar adicionar a seguinte class na sua folha de estilo

.s{display:block;} .c{display:none;} @media screen and (max-width: 1200px) { .s{display:none;} .c{display:block;} }

Essa classe funciona para o seguinte:

s = site
c = celular


Quando o site estiver sendo visto em navegadores de pc vai mostrar a classe s e ocultar a c, quando visto em celulares o inverso.

Note o max-width, ele é relativo a quantidade de pixels da tela, você pode reduzir ou aumentar se desejar.

O próximo passo é adicionar as divs onde o banner será mostrado.

<div class="s"> <!-- BANNER 728X90 //--> </div> <div class="c"> <!-- BANNER 320X100 //--> </div>

Como mostrado acima você deve colocar os blocos de códigos nos respectivos lugares.

Depois é só testar. Se desejar pode testar com o fórum CodigosnaWeb.com. Verá que no navegador de computador mostra um tipo de banner e em celulares e tablets outro tipo de banner.
2
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado