Mis barras de búsqueda anchura no pueda ser inferior a 200 píxeles

votos
2

A partir de ahora he logrado tener la anchura de cambio barra de búsqueda en todas las resoluciones, pero una vez que llegue a pantallas de menor tamaño y la necesidad de ancho de las barras de búsqueda para ir por debajo de 200 píxeles, no va, lo que significa que mi barra de búsqueda está por debajo de su lugar de línea.

1280x800 y establecer el ancho de 300px

1024x768 y establecer el ancho de 150 píxeles ( NO FUNCIONA )

Como referencia, el sitio web es Redec , y estoy tratando de asegurarse de que la barra de búsqueda cabe en la barra de navegación en la mayoría de las resoluciones. Por favor siéntase libre para inspeccionar la página como soy incapaz de enumerar el HTML puro. A continuación se muestra la CSS en relación con la barra de búsqueda.

También puede utilizar Screenfly a reproducir con precisión el problema cambiando la resolución fácilmente.

¡Gracias de antemano!

/*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;
        }
    }
}
Publicado el 18/12/2018 a las 11:10
fuente por usuario
En otros idiomas...                            


3 respuestas

votos
2

Utilizar este CSS

.x-nav-wrap.desktop {
    display: block;
    width: calc(100% - 225px);
    float: left;
}
Respondida el 18/12/2018 a las 11:18
fuente por usuario

votos
1

utilizar esto en línea sin 1722 en su CSS

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

y esto no se romperá.

Respondida el 18/12/2018 a las 11:20
fuente por usuario

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

utilizar max-anchura, que no permitirá la barra de búsqueda para crecer desde arriba mencionado tamaño de la anchura max.

Respondida el 18/12/2018 a las 11:50
fuente por usuario

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