Meine Suche Bars Breite nicht unter 200px gehen

stimmen
2

Ab jetzt habe ich es geschafft die Suchleiste Änderungsbreite bei allen Auflösungen haben, aber sobald ich auf kleinere Bildschirmgrößen erhalten und müssen Breite die Suchleisten unter 200px zu gehen, wird es nicht, was bedeutet, dass meine Suchleiste unten stattdessen geht Inline.

1280x800 undBreite von 300 Pixeln gesetzt

1024x768 und setzen Breite von 150px ( FUNKTIONIERT NICHT )

Als Referenz ist die Website REDEC , und ich versuche , bei den meisten Auflösungen der Suchleiste paßt in der Navigationsleiste , um sicherzustellen. Fühlen Sie sich bitte frei , um die Seite zu überprüfen , da ich nicht in der Lage bin , die rohe html aufzulisten. Unten ist die CSS auf die Suchleiste zusammen.

Sie können auch verwenden Screenfly genau das Problem zu replizieren , indem die Auflösung leicht ändern.

Danke im Voraus!

/*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;
        }
    }
}
Veröffentlicht am 18/12/2018 um 11:10
quelle vom benutzer
In anderen Sprachen...                            


3 antworten

stimmen
2

Verwenden Sie diese CSS

.x-nav-wrap.desktop {
    display: block;
    width: calc(100% - 225px);
    float: left;
}
Beantwortet am 18/12/2018 um 11:18
quelle vom benutzer

stimmen
1

verwenden Sie diese auf der Linie keine 1722 in Ihrem CSS

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

und dies wird nicht brechen.

Beantwortet am 18/12/2018 um 11:20
quelle vom benutzer

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

verwenden max-width, erlauben es wird nicht die Suchleiste von oben erwähnten maximalen Breite der Größe zu wachsen.

Beantwortet am 18/12/2018 um 11:50
quelle vom benutzer

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