Bonjour à tous et à toutes,
Je suis en train de faire un diaporama pour le futur projet d'un client.
Chaque diapo est à propos d'un événement, et sur chacune d'entre elles, il y a :
- A gauche (sur 1/3 de la diapo) : Le titre, le sous-titre, une date et une heure, et une description courte de l'événement
- A droite (sur les 2/3 restants de la diapo) : Une photo
A gauche du diaporama, j'ai le titre "Agenda" et sous le diaporama, j'ai les chevrons qui permettent de passer d'une diapo à l'autre.
Je précise pour la suite que c'est sur une base de Bootstrap 3 (oui, je sais, on est au 5 maintenant, mais je n'ai pas le choix)
J'ai commencé à faire des tests avec 2 événements.
Sur ordi, ça va. J'ai quelques petits soucis, mais rien d'insurmontable.
Là où ça coince vraiment, c'est sur mobile.
J'ai bien (du haut vers le bas) :
- Le titre du bloc : "Agenda"
- Le texte qui décrit l'événement
- L'image
- Les chevrons pour passer d'une diapo à l'autre
Là où ça pose problème, c'est que le texte (à gauche sur ordinateur) qui décrit l'événement n'a pas le même nombre de caractères pour les 2 événements tests => les 2 diapos ont une hauteur différente.
Qu'à cela ne tienne, j'ai mis un display : flex sur la div parente du texte qui décrit l'événement (1 div) et de l'image (1 autre div)
Ce qui donne :
(Autre) Problème : Cette fois-ci les 2 diapos ont bien la même hauteur, mais j'ai mon écran coupé en 2 avec à gauche le texte qui décrit l'événement et à droite l'image (qui est toute petite puisqu'elle ne prend que la moitié de l'écran)
J'ai essayé un col-xs-12 sur les div du texte et de l'image, mais ça ne fonctionne pas.
Du coup, comment faire pour que, sur mobile, j'aie mes différents éléments les uns au-dessus des autres et que mes diapos (notamment la partie texte) ait la même hauteur ?
D'avance merci pour vos réponses.
Bonne journée
P.S : Voici le codepen si vous voulez voir de quoi il retourne. Ne prêtez pas attention aux détails comme les chevrons ; sur le site sur lequel je travaille, il n'y a pas de problème.
Modifié par spip93 (10 Jul 2021 - 19:26)
Je suis en train de faire un diaporama pour le futur projet d'un client.
Chaque diapo est à propos d'un événement, et sur chacune d'entre elles, il y a :
- A gauche (sur 1/3 de la diapo) : Le titre, le sous-titre, une date et une heure, et une description courte de l'événement
- A droite (sur les 2/3 restants de la diapo) : Une photo
A gauche du diaporama, j'ai le titre "Agenda" et sous le diaporama, j'ai les chevrons qui permettent de passer d'une diapo à l'autre.
Je précise pour la suite que c'est sur une base de Bootstrap 3 (oui, je sais, on est au 5 maintenant, mais je n'ai pas le choix)
J'ai commencé à faire des tests avec 2 événements.
Sur ordi, ça va. J'ai quelques petits soucis, mais rien d'insurmontable.
Là où ça coince vraiment, c'est sur mobile.
J'ai bien (du haut vers le bas) :
- Le titre du bloc : "Agenda"
- Le texte qui décrit l'événement
- L'image
- Les chevrons pour passer d'une diapo à l'autre
Là où ça pose problème, c'est que le texte (à gauche sur ordinateur) qui décrit l'événement n'a pas le même nombre de caractères pour les 2 événements tests => les 2 diapos ont une hauteur différente.
Qu'à cela ne tienne, j'ai mis un display : flex sur la div parente du texte qui décrit l'événement (1 div) et de l'image (1 autre div)
Ce qui donne :
.content {
display: flex;
}
(Autre) Problème : Cette fois-ci les 2 diapos ont bien la même hauteur, mais j'ai mon écran coupé en 2 avec à gauche le texte qui décrit l'événement et à droite l'image (qui est toute petite puisqu'elle ne prend que la moitié de l'écran)
J'ai essayé un col-xs-12 sur les div du texte et de l'image, mais ça ne fonctionne pas.
Du coup, comment faire pour que, sur mobile, j'aie mes différents éléments les uns au-dessus des autres et que mes diapos (notamment la partie texte) ait la même hauteur ?
D'avance merci pour vos réponses.
Bonne journée
P.S : Voici le codepen si vous voulez voir de quoi il retourne. Ne prêtez pas attention aux détails comme les chevrons ; sur le site sur lequel je travaille, il n'y a pas de problème.
Modifié par spip93 (10 Jul 2021 - 19:26)