Inserir mini banners na versão mobile

Layout
1

Olá! Gostaria de exibir os mini banners na versão mobile,

Alguém consegue ajudar com um código?

2 curtidas
2

Veja se esse tópico de ajuda

2 curtidas
3

Não deu certo por aqui :frowning:

4

Tente com esse código:

(document).ready(function(){ (’.row-fluid.banner.hidden-phone’).removeClass(‘hidden-phone’);
});

1 curtida
5

Eu insiro esse código no CSS?

6

Código JavaScript.
Posição: Rodapé

8

Ainda não deu certo :frowning:

9 
$(function(){$('.row-fluid.banner.hidden-phone').removeClass('hidden-phone');})

aqui foi

image
image934×825 137 KB

4 curtidas
10

Opaaa! Com esse detalhe no código agora foi sim! Muito obrigada pela ajuda :smiley:

Aproveitando, se não for pedir demais, será que consigo usar algum código para deixar só o banner tarja mais legível, pq ele ficou pequeno para leitura. Ou até algum código que consiga quebrar ele em três e usar um carrossel :smiley:

11

Gente, o que eu mudo no código só para deixar os mini banners, não queria que o tarja tbm aparecesse :frowning:

12

remova a linha de codigo que vc inseriu para voltar ao original para avaliarmos novamente.

13

Prontinho, removi! :smiley:

14

desculpe a demora, tem como remover novamente, pois ainda está aparecendo.

15

opa, removido novamente! :smiley:

16 
$(function(){$('.row-fluid.banner.mini-banner.hidden-phone').removeClass('hidden-phone');})

image
image671×905 152 KB

17

Perfeito! Muito obrigada, Leonardo!

Você faz trabalhos de design de site? Se puder deixar seu contato, quero orçar para mudanças futuras que farei no meu site :wink:

18

infelizmente não, não sou muito criativo e com conhecimento avançado, mas indico @brenonovelli, @Ivan_Rabelo e @Ivanilson_Gomes

2 curtidas
19

Olá você poderia me ajudar? :cry:

20

Leonardo, seguindo os passos aqui consegui que os mini banners aparecessem também no mobile, porém ficaram bem grandes! Sabe se tem como diminuir? e distanciar pelo menos uma linha um do outro, como no da nossa colega Calli ?

21

que tal assim?


@media screen and (max-width: 767px){
    .mini-banner .modulo.span4 {
        width: 49%;
        display: inline-block;
    }
    
    .mini-banner .modulo.span4:nth-child(2) {
        display: inline-block;
    }

    .mini-banner .modulo.span4:nth-child(3){
        width: 99%;
    }

    .row-fluid.banner.mini-banner {
        padding-top: 0px;
        width: 98%;
    }
}

image
image591×819 67.7 KB