Moi wyszukiwania bary szerokość nie pójdzie poniżej 200px

głosy
2

W tej chwili udało mi się mieć szerokość zmiany pasek wyszukiwania na wszystkich rozdzielczościach, ale raz dostać się do mniejszych rozmiarów ekranu i potrzebują wyszukiwania bary szerokość przejść poniżej 200px, to nie będzie, to znaczy, że mój pasek wyszukiwania spadnie poniżej zamiast z inline.

1280x800 i ustawić szerokość rozmiar to 300

1024x768 i ustawić szerokość 150 pikseli ( NIE DZIAŁA )

Dla porównania, na stronie internetowej jest Redec , a ja staram się upewnić, że pasuje pasek wyszukiwania na pasku nawigacyjnym w większości uchwał. Prosimy sprawdzić stronę jak jestem w stanie wymienić surowego html. Poniżej znajduje się CSS związane z paska wyszukiwania.

Można również użyć Screenfly aby dokładnie odtworzyć problem przez zmianę rozdzielczości łatwo.

Z góry dziękuję!

/*NAVBAR SEARCHBAR*/
#product-search-0{
    min-width: 350px;
    padding-top:17px;
    padding-left: 15px;
}

/*navbar searchbar at 1400px*/
@media (max-width: 1400px){
    #product-search-0{
        min-width: 400px;
        padding-top: 17px;
        padding-left: 5px;
    }

    /*navbar searchbar at 1320px*/
    @media (max-width: 1320px){
        #product-search-0{
            min-width: 350px;
            padding-top: 17px;
            padding-left: 5px;
        }
    }

    /*navbar searchbar at 1255px*/
    @media (max-width: 1255px){
        #product-search-0{
            min-width: 300px;
            padding-top: 17px;
            padding-left: 5px;
        }
    }

    /*navbar searchbar at 1200px*/
    @media (max-width: 1200px){
        #product-search-0{
            min-width: 250px;
        }
    }

    /*navbar searchbar at 1100px*/
    @media (max-width: 1100px){
        #product-search-0{
            min-width: 200px;
        }
    }

    /*navbar searchbar at 1085px*/
    @media (max-width: 1085px){
        #product-search-0{
            min-width: 150px;
        }
    }
}
Utwórz 18/12/2018 o 11:10
źródło użytkownik
W innych językach...                            


3 odpowiedzi

głosy
2

Użyj tej CSS

.x-nav-wrap.desktop {
    display: block;
    width: calc(100% - 225px);
    float: left;
}
Odpowiedział 18/12/2018 o 11:18
źródło użytkownik

głosy
1

to wykorzystać na linii nr 1722 w CSS

@media (max-width: 1085px)
#product-search-0 {
    width: 110px !important;
    min-width: 100%;
}

i to nie złamie.

Odpowiedział 18/12/2018 o 11:20
źródło użytkownik

głosy
0
.x-nav-wrap.desktop {
display: block;
max-width: 150px;
float: left;}

używać max-width, to przyzwyczajenie pozwalają pasek wyszukiwania wzrośnie z wyżej wymienionych wielkości max szerokości.

Odpowiedział 18/12/2018 o 11:50
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more