2

Eu precisava que na versão desktop de um website fosse exibida uma imagem e na versão mobile outra imagem.

Sendo que no desktop o contador ficaria em cima da imagem (como ele já fica) e no mobile mostraria outra imagem, e o contador embaixo.

A página é essa aqui:

https://www.boutiqueinfantil.com.br/black-friday

Não tenho muita experiência em programação.

Página do website na versão desktop

Página do website na versão mobile

3
  • Você está utilizando bootstrap? se estiver basta usar a classe hidden-xs 16/10/2018 às 20:28
  • Cara vc tem a possibilidade de editar essa imagem?Pois pelo que vi ela tem um longo pedaço a direita epenas com um fundo preto, tipo o símbolo está de um lado e tem um pedação vazio todo preto do outro... não tem necessidade disso. Vc tem acesso a essa imagem para edita-la ou troca-la caso precise?
    – hugocsl
    16/10/2018 às 22:18
  • Sim Hugo ai como boto pra ela se alinhar
    – JVEUZEBIO
    17/10/2018 às 11:16

1 Resposta 1

2

No seu arquivo CSS você pode utilizar Media Query, que possibilita alterar o comportamento do CSS para resoluções diferentes.

Nesse caso o ideal seria ter duas imagens diferentes no seu html. Sendo que a imagem para desktop fique visível por padrão, e a para mobile oculta

Através do exemplo abaixo ((max-width: 700px)) caso a resolução da tela seja no máximo 700px, você pode colocar código css personalizado que funcionará somente nesse situação.

Exemplo:

/** Para mostrar somente no celular*/
@media (max-width: 700px) 
{
  .imagem_mobile
   {
       display: block;
   }
   .imagem_desktop{
       display: none;
   }
}
0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .