Problema con creazione form css/mobile

[Emix]

Buonasera,
ho un form per i campi di ricerca di un noleggio auto. Ho rifatto il form ed adattato lato mobile.
Ora il problema è che il form non gli va bene come l'ho fatto io ma lo vogliono come l'immagine che allego.

Non riesco a farlo identico.. mi si sfalzano i campi oppure lato mobile sono tutti per i cavoli loro.. Mi riuscite ad aiutare?

Sono molto semplici ci sono due select 3 campi text (1 per data a cui applico il datapicker e due per orario) un submit e un altro select... Mi occorre farlo come da foto e renderlo identico lato mobile... anche, come ho pensato di fare, usando due tabelle all'interno di una per centrare il tutto mobile...

Grazie a chi volesse aiutarmi... PS non badate ai colori va benissimo bianco...

 

[tess]

Posta il tuo codice così possiamo dirti dove hai sbagliato.

 

[Emix]

Certamente. Il form attualmente è suddiviso in DIV ma vorrei passare il tutto in TABLE per comodità, ho tentato ma non ho ottenuto granchè.

<style>
@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tbody td {display: block;  text-align:center;}
tbody td:before {
    content: attr(data-th);
    display: block;
    text-align:center; 
  }
}
hr.style-one {display:none}
</style>
<h1> <font color="white">NOLEGGIA LA TUA AUTO</font></h1>
<link rel="stylesheet" href="edilfar.css" type="text/css" />
<div>
<div class="vrcdivsearch vrcdivsearchmodule">
<form action="calculator.php" method="post">
    <div class="vrcsfentrycont"><label>Stazione di ritiro</label><div class="vrcsfentryselect">
      <select name="stazionerit">
        <option value="" select="selected">Scegli l’agenzia di ritiro</option>
        <optgroup label="ROMA">
          <option value="ROMA ">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          </optgroup>
        <optgroup label="MILANO">
          <option value="MILANO">MILANO</option>
          <option value="MILANO">MILANO</option>
          <option value="MILANO">MILANO</option>
          <option value="MILANO">MILANO</option>
          </optgroup>
      </select>
    </div></div>
    <div class="vrcsfentrycont"><label>Stazione di consegna</label><div class="vrcsfentryselect">
    <select name="stazionecons">
<option value="" select="selected">Scegli l’agenzia di consegna</option>
<optgroup label="ROMA">
          <option value="ROMA ">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          <option value="ROMA">ROMA</option>
          </optgroup>
        <optgroup label="MILANO">
          <option value="MILANO">MILANO</option>
          <option value="MILANO">MILANO</option>
          <option value="MILANO">MILANO</option>
          <option value="MILANO">MILANO</option>
          </optgroup>
      </select>
    </div></div>
<div class="vrcsfentrycont"><div class="vrcsfentrylabsel"><label>Data ritiro</label><div class="vrcsfentrydate"><input type="text" class="hasDatepicker" name="datarit" id="datarit" value=""/></div></div><div class="vrcsfentrytime"><label>Ora ritiro</label><span id="vrcmodselph"><select name="pickuph"><option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
</select></span><span class="vrctimesep">:</span><span id="vrcmodselpm"><select name="pickupm"><option value="00" selected="selected">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select></span></div></div>
<div class="vrcsfentrycont"><div class="vrcsfentrylabsel"><label>Data consegna</label><div class="vrcsfentrydate"><input type="text" class="hasDatepicker" name="datacons" id="datacons" value=""/></div></div><div class="vrcsfentrytime"><label>Ora consegna</label><span id="vrcmodseldh"><select name="releaseh"><option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select></span><span class="vrctimesep">:</span><span id="vrcmodseldm"><select name="releasem"><option value="00" selected="selected">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select></span></div></div>
<div class="vrcsfentrycont"><label>Eta conducente</label><div class="vrcsfentryselect"><select name="eta"><option value="1" selected="selected">Maggiore 24 anni</option>
<option value="0">Minore 24 anni</option>
</select></div></div>
    <div class="vrcsfentrycont"><div class="vrcsfentrysubmit"><input type="submit" name="search" class="vrcsearch" value="Cerca"/></div></div>
    </form>
</div>
</div>

Questo invece il CSS che sto usando, è preso da un app/tema che usavo tempo fa, mi serviva qualcosa di gia pronto rounded... posso tranquillamente cambiarlo tutto.

.vrcdivsearchmodule {
    background:#f5ac2d;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    width:95%;
    border:0;
    padding: 0;
}
.vrcdivsearchmodule .vrcsfentrycont {
    margin: 0 0 10px 0;
    display: inline-block;
    min-width: 70%;
    width: 100%;
}
.vrcdivsearch .vrcsfentrycont select,
.vrcdivsearch .vrcsfentrycont input {
    font-size: 11px;
    text-transform: uppercase;
}
.vrcdivsearchmodule .vrcsfentrycont .vrcsfentrydate .hasDatepicker {
    background:#fff url(icone/calendar-ext.png) 90% center no-repeat;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding:3px 6px;
    height: 24px;
    width: 80%;
    border:1px solid #ccc;
    float: left;
    margin: 0 10px 0 0;
}
.vrcdivsearchmodule .vrcsfentrycont .vrcsfentrydate .ui-datepicker-trigger {
    display: none;
}
.vrcdivsearchmodule .vrcsfentryselect {
    background: #fff url(icone/select-arrow.png) right center no-repeat;
    overflow: hidden;
    min-width: 70%;
    width: 92%;
    border: 1px solid #ccc;
       border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
}
.vrcdivsearchmodule .vrcsfentryselect select {
    background: transparent;
    padding: 7px 5px 0;
    font-size: 12px !important;
    line-height: 1;
    border:0;
    border-radius: 0;
    height: 30px;
    -webkit-a5ppearance: none;
    width: 120%;
    color:#999;
}
.vrcdivsearchmodule .vrcsfentrycont #vrcmodselph,
.vrcdivsearchmodule .vrcsfentrycont #vrcmodselpm,
.vrcdivsearchmodule .vrcsfentrycont #vrcmodseldh,
.vrcdivsearchmodule .vrcsfentrycont #vrcmodseldm {
    background: #fff url(icone/select-arrow-hour.png) right center no-repeat;
    overflow: hidden;
    display: inline-block;
    border: 1px solid #ccc;
       border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   float: left;
   min-width:30%;
}
.vrcdivsearchmodule .vrcsfentrycont .vrctimesep {
    display: inline-block;
    padding: 5px;
    float: left;
}
.vrcdivsearchmodule .vrcsfentrycont #vrcmodselph select,
.vrcdivsearchmodule .vrcsfentrycont #vrcmodselpm select,
.vrcdivsearchmodule .vrcsfentrycont #vrcmodseldh select,
.vrcdivsearchmodule .vrcsfentrycont #vrcmodseldm select {
    background: transparent;
    padding: 7px 5px 0;
    font-size: 12px !important;
    line-height: 1;
    border:0;
    border-radius: 0;
    height: 30px;
    -webkit-a5ppearance: none;
    width: 145%;
    color:#999;
}
.vrcdivsearch .vrcsfentrycont label {
    display: inline-block;
    margin: 0 5px 0 0;
    width: 100%;
}
.vrcdivsearch .vrcsfentrycont .vrcsfentrylabsel {
    width: 33%;
    float: left;
}
.vrcdivsearchmodule .vrcsfentrycont .vrcsfentrytime {
    float: left;
    width: 50%;
    margin: 0 0 0 41px;
}
.vrcdivsearch .vrcsfentrylabsel label {
    float: left;
}
.vrcdivsearch .vrcsfentrylabsel .vrcsfentrydate {
    
}
.vrcdivsearch .vrcsfentrycont div {
    display: inline-block;
}
.vrcdivsearchmodule .vrcsfentrysubmit {
    width: 100%;
}
.vrcdivsearchmodule .vrcsfentrysubmit .vrcsearch {
    width: 93%;
}

purtroppo mi viene molto distante dall'esempio in foto... io sono un programmatore php, diciamo che il CSS lo mastico ma non ne capisco granchè... Grazie a chi vorra aiutarmi.

 

[Emix]

nessuno?