es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Barra de búsqueda adaptable.

29 Jul, 2023 Programación

qué ocurre

En max-width: 380px; el texto debería desaparecer y solo debería aparecer el icono de búsqueda. Sin embargo, el texto no desaparece.

@media screen and(max-width: 380px) {
  nav div form span .text {
    display: none;
  }
}


<div class="search-container">
  <form>
    <input type="text" placeholder="Buscar..." name="search" />
    <button type="submit">
      <i class="fas fa-search"></i><span class="text">Buscar</span>
    </button>
  </form>
</div>

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece haber un problema con el código CSS. El selector nav div form span .text está seleccionando el texto dentro de elementos span que son descendientes de un elemento form dentro de un elemento div que es descendiente de un elemento nav. Sin embargo, en el código HTML proporcionado, no existe tal estructura. En su lugar, el elemento span con la clase text es un hermano del icono de búsqueda.

    Para solucionar el problema, el selector CSS debe modificarse para seleccionar el elemento correcto. El siguiente selector debería funcionar:

    @media screen and (max-width: 380px) {
  .search-container form button .text {
    display: none;
  }
}

    Esto selecciona el elemento span con la clase text que es un hijo del elemento button que es un hijo de un elemento form que es un hijo de un elemento con la clase search-container. Ahora, cuando el ancho de la pantalla es menor o igual a 380 píxeles, el texto debería desaparecer y solo debería ser visible el icono de búsqueda.

Comments are closed.