<?php

/** Template Name: New Release image side bar */

?>

<?php get_header(); ?>

<?php



$args = array(



'post_type'=> 'movie'



);

$the_query = new WP_Query($args); ?>
	
	<?php if ( $the_query->have_posts() ) : ?>



		<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

			

				<div class="grid-container">
				<div class ="column">
				<div class="img_gallery">
				<?php the_post_thumbnail(); ?></div
				<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
				
				</div></div>

		<?php endwhile; ?>



		<?php wp_reset_postdata(); ?>



	<?php endif; ?>





<?php get_sidebar(); ?>
<?php get_footer(); ?>

J'utilise ce template personalise pour afficher des blocs avec des mages a l’intérieur et par la suite d'autre info. Mon problème c'est que je voudrais que 3 colonnes au lieu de 2 et la side bare est totalement explose en bas de page au lieu d'etre a droite

voici css que j ai mis en place

.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  background-color: ;
  padding: 5px;
    float: left;

  width: 33%;
}

.column {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 2px;
  font-size: 15px;
  text-align: center;
    
    
}

je rajoute une capture écran pour être plus clair ca doit etre juste un reglage de css si quelqu un peut m'aider ce serait super

merci

Salut,

Ben, c'est pas compliquer, tu remplace "grid-template-columns: auto auto auto;" par"grid-template-columns: auto auto;"et ça y est : tu n'as plus que deux colonnes.

Sinon, une manière plus propre d'utiliser les templates sur les grid-layout, c'est plutôt ça : "grid-template-columns: repeat(2, 1fr);"

-
Edité par BrainError 27 octobre 2021 à 16:31:43

merci mais ca bug toujours j'ai pris la premiere option ok j ai 3 colonnes mais le side bar est toujours mal place je pense a cause de la taille des images mais la a force de faire tout et n'importe quoi je suis totalement perdu

j'ai bien une class pour image <div class="img_gallery"> j'ai teste different options avec max-width: 200px;
    height: auto;} ou autres mais ca veut pas je suis pas du tout cale deja je suis content d'avoir réussi a créer mon template et la c'est cette css qui me bloque

grid-template-columns: repeat(2, 1fr);" ca ne marche pas du tout ca fait quelque chose si je supprime 'display: inline-grid;' de .grid-container

le fichier css que j'ai maintenant

.grid-container {
  display: inline-grid;
 grid-template-columns: auto auto;
  background-color: ;
  padding: 5px;
	float: left;
}

.column {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 2px;
  font-size: 15px;
  text-align: center;
	  width: auto;
	height:300px;

	
}
.img_gallery{

BrainError a écrit:

Salut,

Ben, c'est pas compliquer, tu remplace "grid-template-columns: auto auto auto;" par"grid-template-columns: auto auto;"et ça y est : tu n'as plus que deux colonnes.

Sinon, une manière plus propre d'utiliser les templates sur les grid-layout, c'est plutôt ça : "grid-template-columns: repeat(2, 1fr);"

-
Edité par BrainError il y a 10 minutes

bon apres bien des galeres j'ai fini par trouver une solution que je partage

.grid-container {
  display: inline-grid;
 grid-template-columns: auto auto;

  background-color: ;
  padding: 5px;
	float: left;
	max-width: 100%;
	width: 100px;
	
	 
}


.all-grid-container{
	display: flex;
	flex-wrap: wrap;
	margin-left: 250px;
}
.all-grid-container .grid-container{
	float: none;
	width: 33.33%;
	box-sizing: border-box;
	margin-bottom: 16px;
}
@media (min-width: 600px){
	.widget-area{
		float: left;
	}
}