Hola @patricia_es87,
Tal como han señalado @fernandodigital y @lorena_web30, el problema reside en cómo manejas el flujo de los elementos y los separadores. Estás en PrestaShop 8.1.6, lo cual es importante. El tema classic utiliza una estructura de migas de pan bastante sencilla que podemos estilizar sin problemas.
Para lograr el efecto de píldora, los chevrons y el comportamiento de wrapping adecuado en móvil, la clave es usar flex-wrap: wrap; en el contenedor principal y ajustar los margin y padding de los ítems. Aquí te dejo un snippet CSS que puedes añadir a tu themes/classic/assets/css/custom.css:
.breadcrumb {
display: flex;
flex-wrap: wrap; /* Permite que los elementos se envuelvan en varias líneas */
padding: 0.5rem 0;
margin-bottom: 1.5rem;
list-style: none;
}
.breadcrumb-item {
display: flex; /* Usamos flex para alinear el texto y el separador */
align-items: center;
He hecho los siguientes cambios:
- He añadido
flex-wrap: wrap; a .breadcrumb para que los elementos se posicionen en la siguiente línea si no hay espacio.
- Cada
.breadcrumb-item ahora también es display: flex; para centrar el texto y su pseudo-elemento de chevron.
- Se ha añadido
margin-bottom: 0.5rem; a .breadcrumb-item para que, al envolverse, haya espacio entre las filas de píldoras.
- El separador
::before original se ha vaciado y se ha creado un ::after para el chevron, usando el carácter Unicode \203A para un chevron limpio. Esto se aplica a todos los ítems excepto al último.
- El último
breadcrumb-item (la página actual) se ha estilizado de forma diferente, sin fondo de píldora y con texto en negrita, ya que no necesita un separador y suele ser el foco.
Con esto, las migas de pan deberían verse como píldoras, con un chevron estético y, lo más importante, se adaptarán correctamente a pantallas pequeñas.