Meus barras de busca largura não vai abaixo de 200px

votos
2

A partir de agora eu consegui ter a largura mudança barra de pesquisa em todas as resoluções, mas uma vez eu chegar a tamanhos de tela menores e precisa as barras de busca largura para ir abaixo de 200px, não vai, o que significa que a minha barra de pesquisa vai abaixo em vez de linha.

1280x800 e definir a largura de 300 pixels

1024x768 e definir a largura de 150 pixels ( NÃO FUNCIONA )

Para referência, o site é Redec , e eu estou tentando certificar-se da barra de pesquisa se encaixa na barra de navegação na maioria das resoluções. Sinta-se livre para inspecionar a página como eu sou incapaz de listar o html cru. Abaixo está a CSS relacionado com a barra de pesquisa.

Você também pode usar Screenfly para reproduzir com exatidão o problema alterando a resolução facilmente.

Agradeço antecipadamente!

/*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 18/12/2018 em 11:10
fonte usuário
Em outras línguas...                            


3 respostas

votos
2

Utilize este CSS

.x-nav-wrap.desktop {
    display: block;
    width: calc(100% - 225px);
    float: left;
}
Respondeu 18/12/2018 em 11:18
fonte usuário

votos
1

usar isso em linha de nenhum 1722 no seu CSS

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

e isso não vai quebrar.

Respondeu 18/12/2018 em 11:20
fonte usuário

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

usar max-width, não vai permitir que a barra de pesquisa para crescer de tamanho largura máxima acima indicado.

Respondeu 18/12/2018 em 11:50
fonte usuário

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