post

Código HTML + CSS Para Adicionar Banner Responsivo no Site (Desktop e Mobile)

Publicado em: 07/12/2023 / Atualizado em: 13/12/2023

Categorias: BlogCSSHTML

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:


Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News


Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/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.

Clique aqui e entre em contato


Comentários