Listas e responsividade com mudança de imagem

14/04/2020

6

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.
Responder

Post mais votado

16/04/2020

Com media query, por ex:

no HTML coloque :


<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






Oh meu caro, ajudou muito....obrigado. Cnnsegui fazer o código e ficou show de bola
Responder

Mais Posts

16/04/2020

Vinicius

Com media query, por ex:

no HTML coloque :


<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

17/04/2020

Marcelo Mozart

Com media query, por ex:

no HTML coloque :


<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



Vinícius,
Eu usei o código e fiz as adaptações.
Quando vou no console do navegador e texto as resoluções dos dispositivos. Ok. Tudo certo.

Mas se eu pegar o navegador e minimizar o tamanho dele para dimensões intermediárias, ou seja, 1050px....1200 px (tipo....arrastar a janela diminuido o tamanho dela) ele acaba não mostrando as section que eu defini no @media

Me parece que para tamanho de dispositivo, ok. Mas para tamanhos de telas, aí o código precisaria ter mais alguma coisa...
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar