Bonjour, j'ai actuellement un rangement de ma liste sur 3 colonnes (ou 2 suivant la largeur dispo) mais avec une lecture de gauche à droite sur les 3 colonnes (https://www.galerieduverre.com/artistes/) et je voudrais que ce soit rangé par colonne (lecture de haut en bas).
Comment faire pour changer cela ? Je pense que le souci vient du fait qu'il a été codé avec "grid" et non "column" mais après de nombreux essai impossible à changer...
<?php
$artistes = get_posts( [
'post_type' => 'artistes',
'orderby' => 'title',
'order' => 'ASC',
'numberposts' => 999,
] );
?>
<section class="py-10">
<div class="container">
<h1 class="mb-8 text-32px font-light"><?= get_the_title() ?></h1>
<div class="grid sm:grid-cols-2 lg:grid-cols-3">
<?php foreach ( $artistes as $post ) : setup_postdata( $post ); ?>
<a href="<?= get_artist_permalink(get_permalink( $post->ID )) ?>" class="hover:underline">
<?php the_field( 'prenom' ) ?>
<?php the_title(); ?>
</a>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
</section>
<section class="py-16 border-t border-white border-opacity-20">
<div class="container mb-8">
<h2 class="mb-8 text-32px font-light"><?= pll__( 'presentation_artists_title' ) ?></h2>
</div>
<?php get_template_part( 'views/partials/slider-artistes' ); ?>
</section>
4 réponses
Si c'est bien le framework tailwind qui est utilisé as-tu essayé quelque chose comme :
<div class="columns-1 sm:columns-2 lg:columns-3">
...ta boucle PHP...
</div>
Bonjour, merci beaucoup pour ta réponse. Je pense que c'est en effet le framework tailwind mais je n'en suis pas sûre (comment puis-je vérifier?). Ce n'est pas moi qui ai fait le site internet, j'essaie juste de corriger ce problème...
En tout cas quand j'ai essayé de remplacer la ligne <div class="grid sm:grid-cols-2 lg:grid-cols-3"> par <div class="columns-1 sm:columns-2 lg:columns-3">, sur ma page il n'y a plus de colonnes mais juste le texte en un seul paragraphe
Bonjour,
1/ pour le framework on peut le deviner d'après les noms de classes utilisées, peut être qu'il y a aussi un lien CDN vers Tailwind dans le header du fichier
2/ effectivement le problème de mon code est que le navigateur va tout afficher dans une même colonne même quand il y en a bien 3 je n'avais pas réfléchi qu'il ne pouvait savoir quand passer à la colonne suivante
3/ la seule solution que je vois est de rajouter du CSS custom et des media queries ce qui donnerait :
<div class="artist-grid">
...ta boucle PHP...
</div>et pour le CSS :
.artist-grid {
display: grid;
}
/* 1 colonne pour les petits écrans */
@media (max-width: 600px) {
.artist-grid {
grid-template-columns: repeat(1, 1fr);
}
}
/* 2 colonnes pour les écrans moyens */
@media (min-width: 601px) and (max-width: 900px) {
.artist-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 3 colonnes pour les grands écrans */
@media (min-width: 901px) {
.artist-grid {
grid-template-columns: repeat(3, 1fr);
}
}En espérant que ça fonctionne cette fois !..