post #3943
Código HTML + CSS Para Adicionar Banner Responsivo no Site (Desktop e Mobile)
Publicado em: 07/12/2023 / Atualizado em: 13/12/2023
Se você está precisando adicionar banners no seu site ou no site do seu cliente, porém precisa que a informação do Banner apareça de forma responsiva em todos os dispositivos, tanto desktop quanto mobile, este código é pra você.
Logo abaixo, disponibilizo um código em html e CSS, que possibilite você adicionar dois tipos de banners no seu site. Porém, quando o usuário acessar o site através de um computador, vai aparecer apenas o Banner otimizado para desktop, quando o usuário acessar o site via celular, vai aparecer apenas o Banner otimizado para mobile.
Segue o código abaixo:
<a target="_blank" href="#SEU_LINK_AQUI">
<!-- Banner Desktop -->
<img class="banner desktop-banner" src="SEU_SITE/banner-desktop.webp" alt="Banner Desktop">
<!-- Banner Mobile -->
<img class="banner mobile-banner" src="SEU_SITE/banner-mobile.webp" alt="Banner Mobile">
</a>
<style>
.banner {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* Estilos específicos para a versão desktop (largura a partir de 767px) */
@media only screen and (min-width: 767px) {
.mobile-banner {
display: none;
}
}
/* Estilos específicos para a versão móvel (largura menor que 767px) */
@media only screen and (max-width: 766px) {
.desktop-banner {
display: none;
}
}
</style>Espero que este código tenha te ajudado. Um forte abraço e até o próximo post.
Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=3943
ID de Referência: 3943
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.