Responsive Filter

Question

Responsive Filter

Asked 5 years, 7 months ago

Viewed 91 times

1

I work with the Tray platform and I’m developing a custom filter for my Site, but I set the filter to be viewed on the computer, but now that I went to make the settings for him to be responsive and so when viewing on mobile do not occur distortions, I’m not getting Follow the HTML I’m using

<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>

Follow the print as this getting on mobile, and the button is located in the corner of the page outside the view

As it is getting on the phone, put a print there. And you are putting 600px in the class . overflow??

– hugocsl

2019/03/12 at 17:34
@hugocsl I used a model ready, and already had this value, and as I am customizing I have not changed it yet, but I do not understand much . overflow, what would it be? Thanks

– Vinicius Castilho

2019/03/12 at 18:16

2 answers

1

Guy your code was a little confused, too much unnecessary CSS etc. I made a template using flex and was very responsive.

Basically I divided each group of label with the title and the select in width: calc(100% / 4); and when the screen gets smaller than @media 768px I put width: calc(100%);

Follow the image code above. I left everything very basic, with as little CSS as possible, for you to understand better, but then you can styling to your liking, for example putting text-align: center; in 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>

1

Our guy, helped me a lot, it was what I needed, I am not experienced in HTML, actually very beginner but I am developing in the company as I am asked, so I am learning researching a lot and with your help helped me a lot Perfect what you sent and I will study your changes & #Xa;Thank you

– Vinicius Castilho

2019/03/12 at 18:18
@Viniciuscastilho I do not know the intention of this Overflow, I just found it strange he has a fixed measure in PX. Another thing, don’t use the Fieldset tag, it is a tag that has several default styles that the browser itself applies to it, preferably by other tags like the label itself, or Section. If you thought the answer solved the problem consider marking it as accepted in this next to the arrows of the answer. If another answer comes up that you think is more appropriate you can take this one and pass it on to her. So your question is not open on the site as a question without accepted answer

– hugocsl

2019/03/12 at 18:20

Browser other questions tagged html filter responsive tray

You are not signed in. Login or sign up in order to post.

by Jefferson Ricardo • **105** points · Answer 1 · 2019-03-12T17:23:34+00:00

For responsive attributes, you need to apply to your css

ex:

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

  #button1 {
    width: 50px;
  }
}

take a look at this article

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