Alterar imagem de acordo com resolução

[Gabriel Benitez 0]

bom dia pessoal,

 

tenho este site feito com tema wordpress adaptado. utilizo um widget para inserir os videos e os textos, eis o seguinte. preciso alterar a imagem da seta que aparece ao lado dos titulos (seta apontando para o video) pois no celular os videos ficam acima e nao do lado.

 

ou seja no tablet e pc a seta fique para esquerda e no celular fiquei para cima.

 

alguem sabe a solução?

 

obrigado

[Junior Varoni 9]

Bom dia Gabriel,

 

Acrescente isso em seu css

@media only screen and (max-width: 680px) {
    .alignnone{
    -webkit-transform: rotate(-270deg);
    -o-transform: rotate(-270deg);
    -moz-transform: rotate(-270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
}

Explicação:

A @media screen é uma media query do css3, quando seu layout chegar numa resolução de no maximo 680px, esse código será executado. Apartir de 681px, esse código deixa de ser executado, voltando a seta ao seu estado original.