Modulo versione desktop e responsive mobile?

[kefy]

CIao a tutti,
ho un problema:
Ho creato un modulo con dei i div allineati in orizzontale (1 div contenitore e dentro 4 div con campi form e pulsante). Ho assegnato a tutti i div il valore

Codice: [Seleziona]

display:inline-block;

Purtroppo anche dallo smartphone si vedono in orizzontale! Da mobile vorrei, invece, che  si mettessero uno sotto l'altro, ovviamente.


Ho provato a inserire una regola del genere nel css:

Codice: [Seleziona]

@media all and (max-width: 480px) { .pass-container {width: 100%;float: left;} }

dove pass-container è il nome del div che "contiene " tutti gli altri 4.
Ma non funziona.. Ho sbagliato qualcosa nella sintassi o è una questione di disposizione dei div?


PS.
Se non dovessi riuscire con questo "metodo", è possibile creare due moduli separati (uno con i div orizzontali ed uno con i div verticali) e poi richiamarli in qualche modo a seconda del dispositivo di visualizzazione?

[floyd1616]

Ciao,
più che un "problema" inerente joomla, mi sembra sia riferito solo ed esclusivamente ai CSS.

Se ho capito bene, in un monitor di grandi dimensioni i 4 div interni li vorresti allineati in orizzontale.
Su smartphone, invece, in verticale.

Ho fatto una prova al volo, velocissima, spero possa esserti di aiuto.

Codice CSS:

Codice: [Seleziona]

div{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}


Codice: [Seleziona]

.pass-container{background:tomato;margin:50px auto;padding:20px 0;}
.interno{height:60px;background:green;}


Codice: [Seleziona]

@media screen and (max-width:767px){
.pass-container{width:90%;}
.interno{width:100%;margin-bottom:20px;}
.interno:last-child{margin-bottom:0;}
}


Codice: [Seleziona]

@media screen and (min-width:768px){
.pass-container{width:860px;overflow:hidden;}
.interno{float:left;width:200px;margin-right:20px;}
.interno:last-child{margin-right:0;}
}


Codice: [Seleziona]

<div class="pass-container">
<div class="interno"> </div>
<div class="interno"> </div>
<div class="interno"> </div>
<div class="interno"> </div>
</div>


Ho mantenuto lo stesso nome che hai dato tu, per il contenitore generale.
.interno l'ho assegnato ai 4 elementi interni, appunto.

Per il monitor ho usato il float, anche se mi piace di più flexbox. Punti di vista.

Penso tu non abbia adottato le mediaqueries. Io ho bloccato fino a 767px per lo smartphone.  Da 768px in su, wide screen.

In allegato le 2 screen che ho ottenuto. Spero di aver capito bene quello che volevi.

Saluti

[kefy]

Floyd sei un genio!!
Si, è vero, è una questione più di css, ma ho sempre e solo fatto siti con joomla per cui ormai le due cose per me, sono un tutt'uno!
Comunque ci ho messo tutto il pomeriggo ma ha funzionato alla grande!!


Come posso sdebitarmi?


Grazieeeeeeee

[kefy]

ps. ho un altro problema.
Nello home è tutto a posto, invece nelle altre pagine i campi per la scelta del giorno sono più grandi (in altezza).
Gli altri 2 invece sono "giusti".


Com'è possibile? Non riesco a capire perchè. Eppure il modulo è sempre lo stesso.
Da cosa può dipendere?

[floyd1616]

Ciao,
dipende, secondo me, solo e soltanto dal css.

Potrebbe darsi che ci sia qualche "conflitto" con il reset.css (se presente) nella cartella del template, oppure altri files.

Abbastanza difficile stabilirlo da 2 screen.

Posta il link al sito, se è online, in maniera tale da capire qualcosa.

Saluti

[kefy]

GRAZIE! il sito è www.bsej.com