Ridimensionare la searchbar a seconda della dimensione della finestra

[installer19]

Ciao a tutti,

è da poco più di un mese che bazzico con l'HTML.
Ho letto un po' qualche guida qua e la e poi mi sono buttato a capofitto alla creazione del sito che ho in mente con l'aiuto di Joomla e della funzione "ispeziona" dei browser.

Mi perdonerete quindi se non sono ancora padrone del gergo e se parlo in maniera molto elementare.

Come da oggetto, quello che vorrei ottenere è fare in modo che la mia searchbar assuma una struttura diversa a seconda che la finestra sia a tutto schermo oppure copra solo una porzione dello schermo.
Il comportamento deve essere simile a quanto fa la barra di tripadvisor: riducendo la finestra vi accorgerete che passa dallo stare tutto su una riga allo stare tutto su una colonna.
Ed è proprio quello che vorrei fare anche io con la mia.

Io ho creato due classi con queste istruzioni che ho scritto in un CSS di override:

@media ( min-width: 401px) {
  .the_4_fields_per_row {
    width: 100% !important;
    margin: 0px;
    display: block;
    float: left;
  }
}

@media (max-width: 400px ) {
  .the_4_fields_per_column {
    width: 50% !important;
    margin: 0px;
    display: block;
    float: left;
  }
}

ma il comportamento che ha è quello di continuare a stare tutto su una riga con gli elementi che si restringono (tipo a fisarmonica).

Le due classi le ho inserite nel "Module Class Suffix" del modulo di Joomla.

Mi potreste dare una mano e dire cosa devo aggiungere o cambiare nelle due istruzioni per avere ciò che ho in mente io?

Grazie mille

[Vincent.Zeno]

ciao e benvenuto

innanzi tutto bisogna sapere come è fatto il tuo menu che contiene la searchbar:
è un lista?
è un gruppo di contenitori?
in ogni caso serve sapere anche le classi di appartenenza.
posta il codice html della parte interessata, poi proviamo...


edit
ricorda che, per postare codice su forum, deve sempre essere racchiuso nel tag CODE (vedi tasto #)

[installer19]

Ciao,

grazie a te per l'accoglienza e grazie per il suggerimento su come postare il codice.

La searchbar è di fatto una tabella e il codice è questo che ti incollo:

<div class="vm_search_inline" style="height: 200px;">            <div class="VM_search_rent">
            <!--div><?php echo _VEHICLE_MANAGER_LABEL_BUTTON_RENT; ?>:</div-->
              <div class="box_from">
                  <!--span class="col_01"><?php echo _VEHICLE_MANAGER_LABEL_AVAILABLE_FOR_RENT_FROM; ?></span-->
                  <style> 
            input[type=submit] {
            border-radius: 0px 30px 30px 0px;
            -webkit-appearance:none;                                                               
            }
        </style>
                  
                <table>
                      <tr>
                          <td><input style="border-radius: 30px 0px 0px 30px; width:100%; " type="text" name="searchtext" size="300" maxlength="300" placeholder="<?php echo _VEHICLE_MANAGER_SEARCH_DESC1; ?>"/></td>
                          <td><input style="border-radius: 0px 0px 0px 0px; width:100%; " type="text" id="vm_search_date_from_mod" name="search_date_from1" placeholder="<?php echo _VEHICLE_MANAGER_LABEL_AVAILABLE_FOR_RENT_FROM; ?>"></td>                          
                          <td><input style="border-radius: 0px 0px 0px 0px; width:100%; " type="text" id="vm_search_date_until_mod" name="search_date_until1" placeholder="<?php echo _VEHICLE_MANAGER_LABEL_AVAILABLE_FOR_RENT_UNTIL; ?>"></td>                                          
                         <td> 
                         <input type="submit" value="<?php echo _VEHICLE_MANAGER_LABEL_SEARCH_BUTTON; ?>" class="button"></input>
                         </td>
                         </tr>
                   </table>
                   <input type="hidden" name="option" value="com_vehiclemanager"/>
                    <input type="hidden" name="task" value="search_vehicle"/>
                    <input type="hidden" name="Itemid" value="<?php echo $ItemId ?>"/>               </div>

I codici delle classi sono in un file css e sono:

.VM_search_rent .input-medium,
.VM_search_rent .input-medium {  width: 109px;
}
.vm_search_inline {
  display: inline-block;
  margin: 0 20px 10px 0;
  vertical-align: top;
}
.vehiclemanager_mod_search .VM_search_rent .box_from,
.vehiclemanager_mod_search .VM_search_category {
  clear: both;
}
.vehiclemanager_mod_search .VM_search_rent span,
.vehiclemanager_mod_search .VM_search_category span {
  float: left;
  margin-right: 5px;
  line-height: 2; }

Alla fine di quest'ultimo file ho messo anche le due istruzioni @media del post precedente però comunque non funziona.

Come posso procedere?
Fammi sapere se hai bisogno di altro.

Grazie mille

[installer19]

up

[installer19]

up

[Vincent.Zeno]

ma la searchbar la puoi cambiare?
il fatto che sia costruita con una tabella complica le cose...

[installer19]

Vincent ma guarda,
se mi aiutate e mi dite un po' dove e come devo fare le modifiche io faccio tutto pur di ottenere quello che ho in mente.

[Vincent.Zeno]

ti do uno spunto su cui lavorare...

CSS
@media screen and (max-width: 400px) {
  .formItem {
    width: 100% !important;
    margin: 0px;
    clear:left;
  }
  .formItem input { width:100%;
}

}


@media screen and (min-width: 401px) and (max-width: 1920px) {
  .formItem  {
    width: 25% !important;
    margin: 0px;
    display: block;
    float: left;
  }
  .formItem input { width:100%;
}
}


HTML
<div class="boxFrom">
    <div class="formItem"><input style="border-radius: 30px 0px 0px 30px;  " type="text" name="searchtext" maxlength="300" placeholder="uno" ></div>
    <div class="formItem"><input style="border-radius: 0px 0px 0px 0px; " type="text" id="vm_search_date_from_mod" name="search_date_from1" placeholder="due"></div>
    <div class="formItem"><input style="border-radius: 0px 0px 0px 0px;  " type="text" id="vm_search_date_until_mod" name="search_date_until1" placeholder="tre"></div>
    <div class="formItem"><input style="border-radius: 0px 0px 0px 0px; " type="submit" value="" class="button"></div>
    <input type="hidden" name="option" value="com_vehiclemanager" >
    <input type="hidden" name="task" value="search_vehicle" >
    <input type="hidden" name="Itemid" value="" >    
</div>