Mes barres de recherche largeur ne sera pas aller au-dessous 200px

voix
2

En ce moment, je suis parvenu à avoir la largeur de changement de barre de recherche à toutes les résolutions, mais une fois que je reçois de plus petites tailles d'écran et besoin des barres de recherche largeur de descendre en dessous 200px, il ne sera pas, ce qui signifie que ma barre de recherche passe en dessous à la place de ligne.

1280x800 et définirlargeur de 300px

1024x768 etlargeur ensemble de 150px ( NE FONCTIONNE PAS )

Pour référence, le site est Redec , et je suis en train de vous assurer que la barre de recherche s'inscrit dans la barre de navigation dans la plupart des résolutions. S'il vous plaît ne hésitez pas à inspecter la page que je ne peux pas énumérer les html brut. Ci - dessous le CSS lié à la barre de recherche.

Vous pouvez également utiliser Screenfly pour reproduire avec précision le problème en changeant la résolution facilement.

Merci d'avance!

/*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;
        }
    }
}
Créé 18/12/2018 à 11:10
source utilisateur
Dans d'autres langues...                            


3 réponses

voix
2

Utilisez ce CSS

.x-nav-wrap.desktop {
    display: block;
    width: calc(100% - 225px);
    float: left;
}
Créé 18/12/2018 à 11:18
source utilisateur

voix
1

utiliser en ligne pas 1722 dans votre CSS

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

et cela ne cassera pas.

Créé 18/12/2018 à 11:20
source utilisateur

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

utiliser max de largeur, il permettra pas la barre de recherche à croître à partir mentionnée ci-dessus la taille de la largeur max.

Créé 18/12/2018 à 11:50
source utilisateur

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