0

Visualización del código en pantallas pequeñas

Este es el código, resulta que para pantallas medianas y grandes el queda con un formato responsivo adecuado; pero para pantalla con un max-with: 576px no queda bien. El input donde se coloca el texto, se corta como muestro en la imagen y donde vapara colocar las fechas de inicio y final, no se pueden escoger, porque también se cortan. Les agradecería mucho que pudieran ayudarme con esta situación, ya he intentado de todo y no me deja hacer nada.

<div class="container date-filter-container">
  <form class="filtrar-b d-flex gap-3 align-items-center" role="search">
    <div class="input-group date-filter">
      <span class="input-group-text" id="basic-addon1">Filtra tu búsqueda:</span>
      <input type="date" class="form-control" id="start-date" aria-label="Fecha de inicio" placeholder="Fecha de inicio">
      <input type="date" class="form-control" id="end-date" aria-label="Fecha de fin" placeholder="Fecha de fin">
    </div>
  </form>

  <div class="container d-flex gap-3 align-items-center mt-3 filter-options-container">
    <div class="input-group mb-3">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Seleccionar ubicación">
        Ubicación
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Medellín</a></li>
        <li><a class="dropdown-item" href="#">Bello</a></li>
        <li><a class="dropdown-item" href="#">Itaguí</a></li>
      </ul>
      <input type="text" class="form-control" aria-label="Texto con botón de selección de ubicación" placeholder="Introduce ubicación">
    </div>

1 respuesta 1

0

Usa una media query

/* movil */
@media (max-width: 500px) {
    .dash-content .title{
        justify-content: center;
    }
    .profile-content{
        position: relative !important;
        max-width: 100% !important;
    }
    .profile-content form{
        max-width: 100% !important;
    }
    .form .form-column{
        flex-wrap: wrap;
    }
    .form .button{
        width: 100% !important;
    }
}

Este es una que tengo yo en unos de mis sistemas y funciona perfectamente

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.