Listas e responsividade

14/04/2020

0

Pessoal, boa noite!
Estou trabalhando no código de responsividade. Já fiz o código para resoluções grandes, agora preciso ajustar para tamanhos menores.
Eu fiz uma lista e nessa lista coloquei imagens. Para que essa imagens sejam substituídas por outras em uma resolução menor, como posso fazer. Segue exemplificação:


<section id="body-whats">
<ul>
<li><a href="link" target="_blank"><img src="imagem 1"></a>
<li><a href="link" target="_blank"><img src="imagem 2"></a>
<li><a href="link" target="_blank"><img src="imagem 3"></a>
</ul>
</section>
======================================================
Agora eu quero que na resolução 480px as imagens sejam outras:

<section id="body-whats">
<ul>
<li><a href="link" target="_blank"><img src="imagem x"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
</ul>
</section>

=====================================================
Eu já fiz esse tipo de ajuste com DIV, onde, na mudança de resolução eu conseguia apontar imagens diferentes, através do atributo <srcset>
Mas com lista eu não consegui encontrar nenhum indicativo ou ajuda para fazer o código.
Marcelo Mozart

Marcelo Mozart

Responder

Posts

16/04/2020

Vinicius

Usando media query, por ex:

<section id="body-whats">

<ul class="desktop">
<li><a href="link" target="_blank"><img src="imagem 1"></a>
<li><a href="link" target="_blank"><img src="imagem 2"></a>
<li><a href="link" target="_blank"><img src="imagem 3"></a>
</ul>
<ul class="mobile">
<li><a href="link" target="_blank"><img src="imagem x"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
<li><a href="link" target="_blank"><img src="imagem y"></a>
</ul>

</section>

no CSS coloque:

@media(min-width:700px){
.mobile{
display:none;
}
}
@media(max-width:701px){
.desktop{
display:none;
}
}


Você pode visualizar e alterar o exemplo neste link

https://codepen.io/vczb/pen/PoPNpXQ


Espero ter ajudado.

Abraço
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar