Mini banner um do lado do outro na versão mobile?

Layout
1
2 
@media (max-width: 767px){
    .row-fluid.banner.mini-banner {
        display: flex;
    }
}

image
image1189×542 116 KB

2 curtidas
3

Top em, será q tem como deixar 2 por cada fileira? Igual a listagem de produtos?

Muito obg em :raised_hands::clap::clap:

4

ai teria que criar um código js, daria bem mais trabalho, mas é possível.

1 curtida
5

fiz algo ± via css.

@media (max-width: 767px){
    .row-fluid.banner.mini-banner .modulo.span4 {
        width: 50%;
        display: inline-block;
    }
    .row-fluid.banner.mini-banner {
        overflow: auto;
        white-space: nowrap;
    }
}

image
image1212×544 137 KB

2 curtidas
6

Top em, vou por aq pra ver como fica.

Muito obg :fist_right::fist_left:

7

Acho que assim fica melhor pq mostra que tem mais itens

@media (max-width: 767px){
    .row-fluid.banner.mini-banner .modulo.span4 {
        width: 45%;
        display: inline-block;
    }
    .row-fluid.banner.mini-banner {
        overflow: auto;
        white-space: nowrap;
    }
}

image
image651×606 116 KB

ou assim

image
image1163×637 137 KB

1 curtida
8

Curti esse em, vou por pra vê

9

apague todos os outros códigos que coloquei,
coloque em inserir html, rodapé, todas as páginas e tipo html,

ai o move pelo touch vai funcionar

<style>
.row-fluid.banner.mini-banner  .modulo.span4 * {
    opacity:1!important;
}
@media (max-width: 767px){
    .row-fluid.banner.mini-banner .modulo.span4 {
        width: 75%;
        display: inline-block;
    }
    .row-fluid.banner.mini-banner {
        overflow: auto;
        white-space: nowrap;
    }
}
</style>
<script>
 $(function(){
	$(".row-fluid.banner.mini-banner .modulo.span4 .flexslider").replaceWith(function() { 
		return "<span>" + this.innerHTML + "</span>"; 
	});
});
</script>
4 curtidas
10

Caramba ficou top, eu só mudei o px pra 768 e pra 50%, ficou show.

Vlw man

1 curtida
11

Esse código dá pra isolar ele só pra versão mobile? Pq quando muda pra versão do computador ele aparece uma parte branca do lado direito.

12

coloca mais esse trecho (atualizei o código acima)

image

2 curtidas