1

Trabalho com a plataforma da Tray e estou desenvolvendo um filtro personalizado para o meu Site, porém configurei o filtro para ser visualizado no computador, mas agora que fui fazer as configurações para ele ser responsivo e assim quando for visualizar no celular não ocorrer distorções, não estou conseguindo Segue o HTMl que estou utilizando

<div>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style disabled>

    }
    .overflow {
      height: 600px;

    }
    #button1 {

    width: 120px;
    position: absolute;
    top: 90px;
    left: 880px;
    background-color: #e00505;
    font-size: 12px;

    }
    h4 {
        font-size: 18px;
    }
    select {
        border-top-color: black;
    border-top-style: ridge;
    border-top-width: 1px;
    border-right-color: black;
    border-right-style: ridge;
    border-right-width: 1px;
    border-bottom-color: black;
    border-bottom-style: ridge;
    border-bottom-width: 1px;
    border-left-color: black;
    border-left-style: ridge;
    border-left-width: 1px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    }
    label {
         border-top-color: black;
    border-top-style: ridge;
    border-top-width: 0px;
    border-right-color: black;
    border-right-style: ridge;
    border-right-width: 0px;
    border-bottom-color: black;
    border-bottom-style: ridge;
    border-bottom-width: 0px;
    border-left-color: black;
    border-left-style: ridge;
    border-left-width: 0px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    }
  </style>
  <script>
  $( function() {
    $( "#speed" ).selectmenu();

    $( "#files" ).selectmenu();

    $( "#number" )
      .selectmenu()
      .selectmenu( "menuWidget" )
        .addClass( "overflow" );

    $( "#salutation" ).selectmenu(#);
  } );
  </script>
<div>
                  <h4 style="text-align: -webkit-center;">Personalize o seu Kit de Segurança</h4>

  <form action="#" id: form>

    <fieldset style= "border: 6px" >
    <label for="speed" style="color: red" ><b> Tipo do seu Kit </b>
     <select name="speed" id="speed" style="
    padding-right: 10px;">
      <option Desable>Selecione</option>
        <option>Residencial</option>
        <option>Comercial</option>

      </select>
    <b>Qualidade de Seu Kit</b>
      <select name="files" id="files" style="
    padding-right: 9px;
    padding-left: 2px;
">
          <option desable> Selecione </option>
          <option value="HD">HD</option>
          <option value="Full HD">Full HD</option>
 <option value="Analógica">Analógica</option>          

      </select>
    <b> Quantidade de Câmeras </b>
      <select name="number" id="number" style="
    padding-right: 10px;
">
        <option desable> Selecione </option>
        <option>1 Câmera</option>
        <option>2 Câmeras</option>
        <option>3 Câmeras</option>
        <option>4 Câmeras</option>
        <option>5 Câmeras</option>
        <option>6 Câmeras</option>
        <option>7 Câmeras</option>
        <option>8 Câmeras</option>
        <option>9 Câmeras</option>
        <option>10 Câmeras</option>
        <option>11 Câmeras</option>
        <option>12 Câmeras</option>
        <option>13 Câmeras</option>
        <option>14 Câmeras</option>
        <option>15 Câmeras</option>
        <option>16 Câmeras</option>
      </select>
   <b> Selecione a Marca </b>
      <select name="salutation" id="salutation">
        <option desable selected>Selecione</option>
        <option>Intelbras</option>
        <option>Hikvision</option>
        <option>Outras</option>
      </select>

      <button class="kd-filter-button" id= "button1">Ver resultados</button>

    </label>
  </fieldset>

</form>

</div>

Segue o print de como esta ficando no celular, sendo que o botão esta localizado no canto da pagina fora da visualização

2
  • Como está ficando no celular, posta um print ai. E pq vc está colocando 600px na classe .overflow??
    – hugocsl
    12/03/2019 às 17:34
  • @hugocsl Utilizei um modelo pronto, e já possuia esse valor, e como estou customizando eu não cheguei a alterar ele ainda, mas não entendo muito o .overflow, oque seria? Obrigado 12/03/2019 às 18:16

2 Respostas 2

1

Cara seu código estava meio confuso, muito CSS desnecessário etc. Fiz um modelo usando flex e ficou bem responsivo.

Basicamente eu dividi cada grupo de label com o título e o select em width: calc(100% / 4); e quando a tela fica menor que @media 768px eu coloco width: calc(100%);

inserir a descrição da imagem aqui

Segue o código da imagem acima. Deixei tudo bem básico, com o mínimo possível de CSS, para vc entender melhor, mas depois vc pode is estilizando ao seu gosto, por exemplo colocando text-align: center; na label...

.overflow {
    height: 600px;
}

#button1 {
    width: 120px;
    position: absolute;
    right: 10px;
    background-color: #e00505;
    font-size: 12px;
}

h4 {
    font-size: 18px;
}

select {
    border: 1px solid #000;
    box-sizing: border-box;
}

section label {
    width: calc(100% / 4);
    color: red;
}

section {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width:768px) {
    section label {
        margin-bottom: 20px;
        width: 100%;
    }
}
<h4 style="text-align: center;">Personalize o seu Kit de Segurança</h4>

<form action="#" id="form">

    <section>
        <label>
            <b> Tipo do seu Kit </b><br>
            <select name="speed" id="speed" style=" ">
                <option desable>Selecione</option>
                <option>Residencial</option>
                <option>Comercial</option>
            </select>
        </label>
        <label>
            <b>Qualidade de Seu Kit</b><br>
            <select name="files" id="files" style=" ">
                <option desable> Selecione </option>
                <option value="HD">HD</option>
                <option value="Full HD">Full HD</option>
                <option value="Analógica">Analógica</option>

            </select>
        </label>
        <label>
            <b> Quantidade de Câmeras </b><br>
            <select name="number" id="number" style=" ">
                <option desable> Selecione </option>
                <option>1 Câmera</option>
                <option>2 Câmeras</option>
                <option>3 Câmeras</option>
                <option>4 Câmeras</option>
                <option>5 Câmeras</option>
                <option>6 Câmeras</option>
                <option>7 Câmeras</option>
                <option>8 Câmeras</option>
                <option>9 Câmeras</option>
                <option>10 Câmeras</option>
                <option>11 Câmeras</option>
                <option>12 Câmeras</option>
                <option>13 Câmeras</option>
                <option>14 Câmeras</option>
                <option>15 Câmeras</option>
                <option>16 Câmeras</option>
            </select>
        </label>
        <label>
            <b> Selecione a Marca </b><br>
            <select name="salutation" id="salutation">
                <option desable selected>Selecione</option>
                <option>Intelbras</option>
                <option>Hikvision</option>
                <option>Outras</option>
            </select>
        </label>
    </section>

    <button class="kd-filter-button" id="button1">Ver resultados</button>

2
  • 1
    Nossa cara, me ajudou muito mesmo, era oque eu precisava, não sou experiente em HTML, na verdade bem iniciante mas estou desenvolvendo na empresa conforme é me solicitado, assim estou aprendendo pesquisando muito e com a sua ajuda me adiantou muito Perfeito oque mandou e vou estudar as suas mudanças Obrigado 12/03/2019 às 18:18
  • @ViniciusCastilho Não sei a intenção desse Overflow, só achei estranho ele ter uma medida fixa em PX. Outra coisa, não use a tag Fieldset, ela é uma tag que tem vários estilos default que o próprio navegador aplica nela, de preferencia por outras tags como a própria label, ou section. Se vc achou que a resposta resolveu o problema considere marca-la como aceita nesse ✔ ao lado das setinhas da resposta. Se depois aparecer outra resposta que vc julgue mais adequada vc pode tirar esse ✔ e passar para a ela. Assim sua pergunta não fica em aberto no site como pergunta sem resposta aceita
    – hugocsl
    12/03/2019 às 18:20
-1

Para atributos responsivos, você precisa aplicar ao seu css

ex:

   @media screen and (max-width: 767px) { /* 767px ate a largura*/

  #button1 {
    width: 50px;
  }
}

da uma olhada nesse artigo

https://www.chiefofdesign.com.br/media-queries-css-introducao-a-diferentes-resolucoes-de-tela/

2
  • Ok, @Jefferson Ricardo vou dar uma boa estudada no link que me passou Obrigado 12/03/2019 às 18:20
  • De nada amigo... 12/03/2019 às 18:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .