blok szukaj przeniesiony na prawą strone i problem w wersji mobilnej

[zabamich]

witam, chciałem przesunąć  blok szukaj do prawej strony i z tym nie ma problemu na PC, okno szukaj ma pełen rozmiar, pojawią się problem w wersji mobilnej sklepu na telefonach. Wygląda to tak:

 

 

jak rozciągnąć to na całą szerokość okna??

kod css z blocksearch:

#search_block_top {
padding-top: 50px;
float: right;
}
 
  #search_block_top #searchbox {
    width: 100%; 
	position: relative;
  }
	
  #search_block_top .btn.button-search {
    background: #2BA5D1;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    color: white;
    width: 50px;
    text-align: center;
    padding: 10px 0 11px 0; }
    #search_block_top .btn.button-search span {
      display: none; }
    #search_block_top .btn.button-search:before {
      content: "\f002";
      display: block;
      font-family: "FontAwesome";
      font-size: 17px;
      width: 100%;
      text-align: center; }
    #search_block_top .btn.button-search:hover {
      color: #6f6f6f; }
  #search_block_top #search_query_top {
    display: inline;
    padding: 0 13px;
    height: 45px;
    line-height: 45px;
    background: #fbfbfb;
    margin-right: 1px; }

.ac_results {
  background: white;
  border: 1px solid #d6d4d4;
  width: 271px;
  margin-top: -1px; }
  .ac_results li {
    padding: 0 10px;
    font-weight: normal;
    color: #686666;
    font-size: 13px;
    line-height: 22px; }
    .ac_results li.ac_odd {
      background: white; }
    .ac_results li:hover, .ac_results li.ac_over {
      background: #fbfbfb; }

form#searchbox {
  position: relative; }
  form#searchbox label {
    color: #333333; }
  form#searchbox input#search_query_block {
    margin-right: 10px;
    max-width: 222px;
    margin-bottom: 10px;
    display: inline-block;
    float: right; }
  form#searchbox .button.button-small {
    float: left; }
    form#searchbox .button.button-small i {
      margin-right: 0; }

[koening]

Wystarczy dodać regułę width dla selektora #search_block_top. Oczywiście w zapytaniu medialnym aby reguła działała tylko i wyłącznie wtedy gdy użytkownik korzysta z telefonu komórkowego.

#search_block_top{
width:100%;
}

[zabamich]

można prosić o przykład jak to zrobić?? nie jestem aż tak biegły

[koening]

W sumie najlepiej na samym dole pliku global.css dodaj takie coś:

@media only screen and (max-width: 768px)
 {
#search_block_top {width:100% !important;}
 }

nie wiem jaka jest hierarchia wczytywania styli, więc najszybsze rozwiązanie jest takie.

Skok wpisałem na 768px bo wtedy już wyszukiwarka słabo wygląda.

Pozdrawiam

Edited April 10, 2017 by koening (see edit history)

[zabamich]

Ok super, sprawnie i bez problemu.