Ridimensionare la searchbar a seconda della dimensione della finestra

[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>