Tu tiempo es muy apreciado 🙂
Soy un artista que no sabe nada y aprende WordPress y usa ChatGPT como mi copiloto de CSS personalizado.
Me gustaría evitar agregar complementos.
Para el desplazamiento horizontal, el código CSS personalizado que ChatGPT me proporciona funciona cuando lo aplico a una página donde agregué manualmente una serie de imágenes. Sin embargo, el mismo código, con pequeños ajustes que proporciona para trabajar con un bucle de consulta, no funciona.
Puede ver ambas páginas a través del enlace a mi página principal que proporcioné a continuación.
En la primera instancia de trabajo, agrego la clase CSS a un grupo principal que contiene una serie de grupos dentro.
En la segunda instancia que no funciona, intenté agregar la clase CSS tanto a un grupo principal que contiene el bucle de consulta como al bucle de consulta en sí (uno a la vez).
Me pregunto si alguien podría decirme cómo solucionar este problema. Preferiría agregar contenido nuevo como publicaciones dinámicas individuales que tener que editar siempre una página estática.
Estoy usando un hijo de 2024, agregando mi CSS a través de un archivo ‘style.css’ en mi carpeta de tema hijo directamente en mi alojamiento.
Código de trabajo para página estática:
.windhorse-scroll {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 100px; /* Adjust spacing between images */
width: 100%; /* Ensures the container fills the available width */
padding-bottom: 10px; /* Optional */
}.windhorse-scroll > * {
flex: 0 0 auto;
scroll-snap-align: center; /* Centers each image when scrolling */
scroll-snap-stop: always; /* Ensures snapping happens reliably */
width: 900px; /* Default width for desktop */
height: 900px; /* Default height for desktop */
}
/* Style the images within the group */
.windhorse-scroll img {
object-fit: cover; /* Ensures the images retain their aspect ratio */
width: 100%; /* Ensures images fit inside their containers */
height: 100%; /* Ensures images fit inside their containers */
overflow: hidden; /* Prevents content overflow */
}
/* Hide the scroll bar */
.windhorse-scroll::-webkit-scrollbar {
display: none;
}
.windhorse-scroll {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Responsive styles for mobile view */
@media (max-width: 600px) {
.windhorse-scroll > * {
width: 100vw; /* Makes each image/container full viewport width */
height: auto; /* Allows height to adjust based on width */
}
.windhorse-scroll img {
width: 100%; /* Ensures images take the full width of the container */
height: auto; /* Maintains aspect ratio */
}
}
Código que no funciona para la página dinámica:
/* windhorse-by-category horizontal scroll */
.category-scroll-windhorse {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 100px; /* Adjust spacing between posts */
width: 100%; /* Ensures the container fills the available width */
padding-bottom: 10px; /* Optional padding */
}.category-scroll-windhorse .wp-block-post-template {
flex: 0 0 auto;
scroll-snap-align: center; /* Centers each post when scrolling */
scroll-snap-stop: always; /* Ensures snapping happens reliably */
width: 900px; /* Adjust this based on your post content */
height: auto; /* Adjust height based on your design */
}
/* Optional: Style the post content inside the loop */
.category-scroll-windhorse img {
object-fit: cover; /* Ensures the images retain their aspect ratio */
width: 100%; /* Ensures images fit inside their containers */
height: 100%; /* Ensures images fit inside their containers */
overflow: hidden; /* Prevents content overflow */
}
/* Hide the scroll bar for aesthetics */
.category-scroll-windhorse::-webkit-scrollbar {
display: none;
}
.category-scroll-windhorse {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Responsive styles for mobile view */
@media (max-width: 600px) {
.category-scroll-windhorse .wp-block-post-template {
width: 100vw; /* Makes each post fill the viewport width */
height: auto; /* Adjusts height based on content */
}
.category-scroll-windhorse img {
width: 100%;
height: auto; /* Maintains aspect ratio */
}
}
La página con la que necesito ayuda: [log in to see the link]