Jump to content
  • 0

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


zabamich

Question

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:

 

post-799475-0-47429100-1491841076_thumb.jpg

 

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; }

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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%;
}
Link to comment
Share on other sites

  • 0

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 by koening (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...