Autore Topic: Modulo versione desktop e responsive mobile?  (Letto 344 volte)

Offline kefy

  • Esploratore
  • **
  • Post: 145
  • Sesso: Femmina
    • Mostra profilo
Modulo versione desktop e responsive mobile?
« il: 16 Apr 2019, 20:46:12 »
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?
« Ultima modifica: 16 Apr 2019, 20:47:53 da kefy »

Offline floyd1616

  • Appassionato
  • ***
  • Post: 457
  • Sesso: Maschio
    • Mostra profilo
Re:Modulo versione desktop e responsive mobile?
« Risposta #1 il: 17 Apr 2019, 09:37:44 »
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




Offline kefy

  • Esploratore
  • **
  • Post: 145
  • Sesso: Femmina
    • Mostra profilo
Re:Modulo versione desktop e responsive mobile?
« Risposta #2 il: 18 Apr 2019, 19:28:02 »
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


Offline kefy

  • Esploratore
  • **
  • Post: 145
  • Sesso: Femmina
    • Mostra profilo
Re:Modulo versione desktop e responsive mobile?
« Risposta #3 il: 19 Apr 2019, 16:46:36 »
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?
« Ultima modifica: 19 Apr 2019, 16:51:19 da kefy »

Offline floyd1616

  • Appassionato
  • ***
  • Post: 457
  • Sesso: Maschio
    • Mostra profilo
Re:Modulo versione desktop e responsive mobile?
« Risposta #4 il: 19 Apr 2019, 17:34:21 »
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

Offline kefy

  • Esploratore
  • **
  • Post: 145
  • Sesso: Femmina
    • Mostra profilo
Re:Modulo versione desktop e responsive mobile?
« Risposta #5 il: 22 Apr 2019, 10:23:47 »
GRAZIE! il sito www.bsej.com

 

Host

Torna su