post

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

Publicado em: 07/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.


Link de 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 para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários