Dúvidas no Web Responsivo

Baliste · 25 de fevereiro de 2014

Boa tarde.

Bem, estou desenvolvendo um site através de um template wordpress responsivo.

O problema é que estou mexendo no layout do template para ficar mais parecido com o que eu tenho em mente, só que quando inseri algumas imagens minhas no código fonte, elas não encolheram como as imagens do próprio template.

Já consultei alguns tutoriais sobre web responsivo e imagens responsiva e ainda não consegui resolver este problema das imagens encolher. Baixei também o plugin JETPACK para o wordpress pois ele agrega as funcionalidades mais populares do WordPress.com. Na verdade, ele funciona com uma ligação ao próprio WordPress.com, para puxar essas funcionalidades do sistema e integrá-las diretamente no seu blog do WordPress e dentre elas o tema para mobile que otimiza automaticamente o site para dispositivos móveis. Apesar do tema PAI já ser responsivo, instalei o plugin acima na esperança dele consertar as imagens que não diminuiram mas não obtive exito também.

Já coloquei também a meta tag viewport, abaixo que diz ao navegador para usar como largura do layout, a largura do viewport, desativando a escala inicial. inclui este código dentro da tag <header> do meu site.

No CSS já inclui também as media queries:

O conjunto de regras abaixo, irão funcionar quando a largura do viewport for 980px ou inferior. A largura da <div> “content” de pixels para porcentagem, transformando a largura do elemento em fluída.

@[member="MEDIA"] screen and (max-width: 980px) {    #pagewrap {        width: 94%;    }    #content {        width: 65%;    }    #sidebar {        width: 30%;    }}

Agora, se o viewport for 700px ou inferior, especifiquei um tamanho automático para as <div>s “content” e “sidebar” e remover os floats. Assim os elementos vão ocupar 100% da tela.

@[member="MEDIA"] screen and (max-width: 700px) {    #content {        width: auto;        float: none;    }    #sidebar {        width: auto;        float: none;    }}

Por fim, se o viewport for 480px ou inferior (tela de celular), redefini a altura da <div> “header” deixando-a automática e mudar o tamanho da tag <h1> para 24px e esconder a <div> “sidebar”.

@[member="MEDIA"] screen and (max-width: 480px) {    #header {        height: auto;    }    h1 {        font-size: 24px;    }    #sidebar {        display: none;    }}

Bem, ainda não consegui resolver o problema das imagens que eu inseri.

Gostaria da ajuda aqui dos desenvolvedores do fórum me ajudasse a resolver este empasse.

O link para o modelo em desenvolvimento é:

http://almamusical.art.br/wordpress/

As imagens que me refiro são as duas da página index.
Uma com forma de VIDEO e a outra está escrito NEWSLETTER.

Agradeço desde já a atenção de vocês>

Obrigado.