Menú de búsqueda reducido.
-
Hola,
En mi página web: https://origencadcam.es/?s=solidworks modifique las páginas de noticias y blog técnico de manera que aparecieran las entradas en 3 columnas y 4 filas.
Me gustaría que siguiese esta regla en el momento que en la barra de búsqueda busco por ejemplo «SOLIDWORKS», las entradas se distribuyan en tres columnas y 6 filas. Porque ahora se ve de uno en uno y un tamaño muy grande.
Muchas gracias de antemano.
Un saludo.
-
Hola @martina42,
¿Podrías facilitarnos la URL de la página concreta donde quieres que esto suceda?
Así podremos analizar la web y ayudarte en lo que buscas.Saludos
🙂Hola @algato333 ,
El primer enlace que comparti es un ejemplo de búsqueda. En esa caso hice clic en la lupa y busque «solidworks». Te envío otro enlace: https://origencadcam.es/?s=swood aqui la búsqueda fue «Swood».
Todas las búsquedas que realizo aparecen con esa vista de los artículos
Gracias de antemano 🙂
Hola @martina42,
Podrías añadir el siguiente código CSS:
.search-results #left-area { display: grid; } .search-results .pagination{ grid-column: 1/-1; } @media (min-width: 700px){ .search-results #left-area { grid-template-columns: repeat(3, 30%); grid-gap: 0 5%; } } @media (min-width: 500px) and (max-width: 699px){ .search-results #left-area { grid-template-columns: repeat(2, 48%); grid-gap: 0 4%; } }
Para añadir ese código podrás hacerlo desde Apariencia/Personalizar/CSS adicional. Hay veces en las que debes limpiar caché para que estos cambios se reflejen.
Espero haberte ayudado, Saludos
Hola @algato333 ,
Genial muchas gracias! Con este código ya se me ha cambiado, lo único que no se porque me sale 5 artículos, es decir 1 fila de 3columnas y 1 fila de 2 columnas. He probado cambiando datos pero no doy con cual puede ser.
Además las letras aparecen muy grandes ¿Esto puedo cambiarlo así?
p {
font-size:12px;
}Hola de nuevo @martina42 ,
Ese código modificaría el tamaño de todos los párrafos de la web.
Supongo que te refieres a que están muy grandes los encabezados. Entonces tendrías que localizar un selector que afecte solo a las páginas de resultados de búsqueda y luego añadir el selector del header concreto. Podrías usar lo siguiente:
.search-results h2 { font-size: 18px; }
En cuanto a la cantidad de resultados mostrados te recomiendo que eches un ojo a este artículo.
Por favor, marca como resuelto este debate si te hemos solucionado el problema. Si tienes otras dudas siempre puedes comenzar un nuevo debate.
Espero haberte ayudado, Saludos
Hola @algato333
Genial, muchas gracias por la ayuda!
- El debate ‘Menú de búsqueda reducido.’ está cerrado a nuevas respuestas.