Adattare un form per cellulari

[max1975_na]

Salve a tutti
Ho la necessita di modificare la grafica di un form per la versione web e quella dei dispositivi mobile.
In pratica quella che non mi piace è quella della versione web, in cui tutti i campi della form, gli imput vengono visualizzati a cascata, ovvero uno sotto l'atro; Questa visualizzazione è perfetta per i dispositivi mobile.
Ho modificato il css inserendo un float:left e un whidt: 33%... cosi facendo sulla versione web ho ottenuto il risultato desiderato, ma sulla versione web in pratica adesso i campi sono accavallati.

Ho provato con questa variazione sul css, ma sembra che non sia andata bene:

/*versione mobile*/ 
@media all and (max-width: 599px)
{    
.rtb-booking-form fieldset>div     
  { 
  margin-top: 1em;    
  }
}
/*versione web*/
.rtb-booking-form fieldset>div 
{    
margin-top: 1em;        
width: 33%;    
float: left;
} 

Qualcuno potrebbe aiutarmi a capire
Grazie

[Prill]

nei css, nel caso vi siano impostazioni diverse per uno stesso elemento prevalgono le ultime che sovrascrivono le precedenti. L'unica regola presa in considerazione nel tuo css è la seconda che dovrà invece apparire prima dell'altra (dai prima le impostazioni generali e poi le sovrascrivi in base alle dimensioni della finestra)

[max1975_na]

Salve a tutti
Ho la necessita di modificare la grafica di un form per la versione web e quella dei dispositivi mobile.
In pratica quella che non mi piace è quella della versione web, in cui tutti i campi della form, gli imput vengono visualizzati a cascata, ovvero uno sotto l'atro; Questa visualizzazione è perfetta per i dispositivi mobile.
Ho modificato il css inserendo un float:left e un whidt: 33%... cosi facendo sulla versione web ho ottenuto il risultato desiderato, ma sulla versione web in pratica adesso i campi sono accavallati.

Ho provato con questa variazione sul css, ma sembra che non sia andata bene:

/*versione mobile*/ 
@media all and (max-width: 599px)
{    
.rtb-booking-form fieldset>div     
  { 
  margin-top: 1em;    
  }
}
/*versione web*/
.rtb-booking-form fieldset>div 
{    
margin-top: 1em;        
width: 33%;    
float: left;
} 

Qualcuno potrebbe aiutarmi a capire
Grazie

Grazie per la risposta, credo di aver capito il concetto!
nel frattempo avevo risolto così:
/*mobile*/
@media all and (max-width: 599px)
{
.rtb-booking-form fieldset>div
{ margin-top: 1em; width: auto; display: block; }
}
/*web*/
@media all and (min-width: 600px)
{
.rtb-booking-form fieldset>div
{ margin-top: 1em; width: 33%; float: left; }
}

e sembra funzionare

[Prill]

Col tuo codice di partenza avresti invece potuto avere:

.rtb-booking-form fieldset>div {    
display:block;        
width: 33%;    
float: left;
margin-top: 1em;
}  

@media all and (max-width: 599px){  
.rtb-booking-form fieldset>div     
  { 
  width: auto; float:none;    
  }
}

Prima la regola generale, poi quella che sovrascrive (con le sole impostazioni da modificare)

[max1975_na]

Col tuo codice di partenza avresti invece potuto avere:

.rtb-booking-form fieldset>div {    
display:block;        
width: 33%;    
float: left;
margin-top: 1em;
}  

@media all and (max-width: 599px){  
.rtb-booking-form fieldset>div     
  { 
  width: auto; float:none;    
  }
}

Prima la regola generale, poi quella che sovrascrive (con le sole impostazioni da modificare)

Grazie per il chiarimento