Suporte » Desenvolvendo com WordPress » Imagem do rodapé não fica responsiva?

  • Olá,
    Eu tenho um tema gratuito no WordPress Org, o tema é Tema Base Mluv da Madly Luv.
    Eu quis mudar o rodapé pondo uma imagem linkavel porém a imagem não fica responsiva.
    Pesquisei no Google, tentei vários códigos e dicas que vi pela internet e nada tem funcionado,
    Se tento por a imagem apenas no Css do tema ela não aparece, se tento por width também não da certo, tentei por width 100% como dizem e nada, tentei várias coisas e anda da certo e só posso pensar que alguma coisa está errada porque já vi temas com imagem no rodape responsiva então deve existir alguma forma de fazer isso no meu também.
    Tentei usar media queries e nada também…
    Códigos que tentei usar no CSS:

    .responsivo {
    max-width: 1080px;
    width: 100%;
    height: auto;
    }
    .responsivo img{
    max-width: 1080px; /* Máximo da largura da imagem */
    max-height: 500px; /* Máximo da altura da imagem */
    min-height: auto; /* Mínimo da altura, por padrão “auto” */
    background-size:100%;
    background-repeat: no-repeat;
    }

    tentei tirar o max-width: 1080px também nada, diminui pra 50px nada

    Tambem tentei isso e nada: img{

    width: 100%;
    height: auto;

    }


    O meu código está assim:

    /***************************
    * FOOTER
    ***************************/
    .rodapeblog {
    padding: 0px 0;

    img{

    width: 100%;
    height: auto;
    }

    font-size: 0.85em;
    text-transform: uppercase;
    }

    .rodapeblog p:last-child {
    margin-bottom: 0;
    }

    E a parte que seria o código de responsividade seria esse mas não marca onde seria o FOOTER:

    /***************************************************
    —————————————————
    * AREA DE RESPONSIVIDADE – TOME CUIDADO AO EDITAR *
    —————————————————
    ***************************************************/

    @media (min-width: 1200px) {
    .container {width:1300px}
    }

    @media (max-width: 1199px) {

    }

    @media (max-width: 1055px) {

    }

    @media (max-width: 1024px) {

    @media (max-width: 800px) {
    .container {padding: 0 20px;}
    .formulario input.form-control.middle {margin-left: 1.2%}
    }

    @media (min-width: 768px) {
    .container {width: 100%}
    }

    @media (max-width: 768px) {
    .colMaior, .colMenor {width: 100%;}
    .colMenor {float: none; margin: 0 auto}
    }

    @media (max-width: 736px) {

    }

    @media (max-width: 650px) {

    }

    @media (max-width: 620px) {
    .container {padding: 0 14px;}

    nav.navegacao ul {display: none;}
    .menu-responsivo {display: block;}

    .postagem footer .comentar {width: 100%; text-align: center;}
    .postagem footer .avatar {position: relative; margin: 40px auto 0; height: 88px; width: 100%; float: left; clear: both;}
    .postagem footer .avatar img {width: 88px; height: 88px; text-align: center; display: block; margin: 0 auto}
    .postagem footer .dados-post {margin: 0 auto; width: 100%; text-align: center; padding: 0 10%}
    .postagem footer .compartilhar {position: relative; height: 25px; margin: 0 auto 10px; top: 10px;}

    .posts-relacionados ul li {width: 33.33%; float: left; line-height: 1.2em}
    .posts-relacionados ul li:nth-of-type(4),
    .posts-relacionados ul li:nth-of-type(5),
    .posts-relacionados ul li:nth-of-type(6) {display: none;}
    }

    @media (max-width: 550px) {
    .formulario input.form-control.middle {margin-left: 0; margin-right: 0; width: 100%}
    }

    @media (max-width: 420px) {

    }

    @media (max-width: 820px) {
    .postagem footer .compartilhar {width: 220px; height: 45px;}

    .posts-relacionados ul li {width: 50%; float: left; line-height: 1.2em}
    .posts-relacionados ul li:nth-of-type(3),
    .posts-relacionados ul li:nth-of-type(4),
    .posts-relacionados ul li:nth-of-type(5),
    .posts-relacionados ul li:nth-of-type(6) {display: none;}
    }

    @media (max-width: 320px) {

    }

    @media (max-width: 319px) {

    }

    E tem a parte do footer php:

    </div>
    <!– fim container duas colunas blog –>
    <!– rodape blog –>
    <footer class=”rodapeblog”>
    <img src=”http://1.bp.blogspot.com/-XEBZpdpM108/Vjtq4MMxZEI/AAAAAAAAUWc/X4EZ3UoOA10/s1600/footer-novo-3.png&#8221; />
    </p>
    </footer>
    <!– fim rodape blog –>

    <?php $options = get_option( ‘mLuv_opcoes_tema’ ); ?>
    <?php if ($options[‘scriptsAdicionaisRodape’]) { ?>
    <!– scripts adicionais –>
    <?php echo $options[‘scriptsAdicionaisRodape’] ?>
    <!– fim scripts adicionais –>
    <?php } ?>

    <?php wp_footer(); ?>

    </body>
    </html>

    E ai, alguma ideia?
    Alguém consegue me ajudar?

Visualizando 1 resposta (de um total de 1)
  • Criador do tópico femariaotoni

    (@femariaotoni)

    Será que pode ter alguma coisa a ver com eu ter mudado um detalhe na area de responsividade?
    originalmente seria assim a primeira parte:

    /***************************************************
    —————————————————
    * AREA DE RESPONSIVIDADE – TOME CUIDADO AO EDITAR *
    —————————————————
    ***************************************************/

    @media (min-width: 1200px) {

    Dai eu deixei assim:

    /***************************************************
    —————————————————
    * AREA DE RESPONSIVIDADE – TOME CUIDADO AO EDITAR *
    —————————————————
    ***************************************************/

    @media (min-width: 1200px) {
    .container {width:1300px}

    Ou seja, adicionei o
    .container {width:1300px}
    Para aumentar a area da postagem e afastar mais a sidebar da area dos posts….

    Será que é esse o problema?

Visualizando 1 resposta (de um total de 1)
  • O tópico ‘Imagem do rodapé não fica responsiva?’ está fechado para novas respostas.