Listas e responsividade com mudança de imagem
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.
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
Curtir tópico
+ 0
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
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
Marcelo Mozart
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
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
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
Clique aqui para fazer login e interagir na Comunidade :)
