bonjour a tous
je suis occuper a m arracher les cheveux avec bbotstrap
pour finaliser ma page d accueil
j ai un container qui est divise en deux parties
donc la première ce sont 9 colonnes avec 1 vidéos
et la deuxième 3 colonnes avec 3 rangées
jusque la rien de plus banal
mais une fois que je réduis mon écran je souhaiterais que les 3 colonnes puissent venir sous les 9 colonnes plus rapidement
j ai essaye de changer le LG en XL pour les deux groupes de colonnes mais alors cela est trop rapide
ensuite je souhaiterais qu une fois les 3 colonnes sous les 9 colonnes que mes 3 paraphes soit les uns a cote des autres
un peu comme sur ce site
https://www.federationpeche.fr/
pour faciliter l explication voici mon codepen
d avance un grand merci pour l aide
https://codepen.io/flexi2202/pen/XWMGrqV
la communauté d'entraide francophone dédiée au PHP
[RESOLU] comment changer l apparence d un bloc lorsque je passe en reponsive
Hello !
Bootstrap gère 4 tailles d'écran : XS (Extra small < 768px pour les smartphones), SM (Small < 992px pour les tablettes), MD (Medium < 1200px pour les petits portables) et LG (pour les portables et fixe > 1200px). Tu peux ainsi définir le comportement en fonction de la résolution de l'utilisateur.
Cela dépend donc de la résolution de l'écran qui n'est pas sensé changer (même si on peut réduire la taille d'une fenêtre sur pc). Il n'est donc pas prévu de transition (si c'est ce que tu entends par "trop rapide"). Il faut simplement choisir la disposition souhaitée pour chaque taille, sachant que si rien n'est précisé, la plus "petite" instruction sera utilisée par défaut pour les plus grande.
Par exemple, un div avec une classe "col-xs-9" aura une taille de 9 sur toutes les résolutions, tandis qu'avec une classe de "col-xs-9 col-md-6", aura une taille de 9 en XS et SM, mais de 6 en MD et LG. Et si rien n'est précisé (pas de valeur pour la résolution utilisée ou les résolutions inférieures), la valeur par défaut est de 12, soit toute la largeur.
Lorsque l'on change de résolution sur le site que tu mentionnes, les 3 blocs de droite restent les uns sous les autres, comme sur ton codepen. Je ne vois donc pas bien ce que tu cherches à obtenir...
Tu peux éventuellement faire un schéma de ce que tu souhaites obtenir pour chaque résolution (en commençant par la plus petite car c'est la plus contraignante.). En voyant comment les blocs se positionnent, tu devrais y voir plus clair pour savoir ou mettre des row et des col-xs/sm/md/lg
Bootstrap gère 4 tailles d'écran : XS (Extra small < 768px pour les smartphones), SM (Small < 992px pour les tablettes), MD (Medium < 1200px pour les petits portables) et LG (pour les portables et fixe > 1200px). Tu peux ainsi définir le comportement en fonction de la résolution de l'utilisateur.
Cela dépend donc de la résolution de l'écran qui n'est pas sensé changer (même si on peut réduire la taille d'une fenêtre sur pc). Il n'est donc pas prévu de transition (si c'est ce que tu entends par "trop rapide"). Il faut simplement choisir la disposition souhaitée pour chaque taille, sachant que si rien n'est précisé, la plus "petite" instruction sera utilisée par défaut pour les plus grande.
Par exemple, un div avec une classe "col-xs-9" aura une taille de 9 sur toutes les résolutions, tandis qu'avec une classe de "col-xs-9 col-md-6", aura une taille de 9 en XS et SM, mais de 6 en MD et LG. Et si rien n'est précisé (pas de valeur pour la résolution utilisée ou les résolutions inférieures), la valeur par défaut est de 12, soit toute la largeur.
Lorsque l'on change de résolution sur le site que tu mentionnes, les 3 blocs de droite restent les uns sous les autres, comme sur ton codepen. Je ne vois donc pas bien ce que tu cherches à obtenir...
Tu peux éventuellement faire un schéma de ce que tu souhaites obtenir pour chaque résolution (en commençant par la plus petite car c'est la plus contraignante.). En voyant comment les blocs se positionnent, tu devrais y voir plus clair pour savoir ou mettre des row et des col-xs/sm/md/lg
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...
bonjour Ryle
comme toujours un très grand merci pour cette explication
j ai finalement trouve un compromis
car je ne pouvais pas commencer a changer les tailles imposées par bootstrap au risque que le reste de mon code ne puisse plus fonctionner
j ai donc diminue un peu le texte que j avais mis dans certains paragraphes avec les 3 colonnes dans le deuxième volet
de cette façon cela m a laisse un peu plus de marge le temps que les 3 paragraphes viennent bien se positionner sous la vidéo
car si au lieu de mettre LG au x colonnes je mettais XL le responsive s effectuait de manière trop rapide
bref tout fonctionne
quand mon site sera termine il sera présenté a vous tous
afin d avoir les critiques
en attendant encore merci pour ces chouettes explications
comme toujours un très grand merci pour cette explication
j ai finalement trouve un compromis
car je ne pouvais pas commencer a changer les tailles imposées par bootstrap au risque que le reste de mon code ne puisse plus fonctionner
j ai donc diminue un peu le texte que j avais mis dans certains paragraphes avec les 3 colonnes dans le deuxième volet
de cette façon cela m a laisse un peu plus de marge le temps que les 3 paragraphes viennent bien se positionner sous la vidéo
car si au lieu de mettre LG au x colonnes je mettais XL le responsive s effectuait de manière trop rapide
bref tout fonctionne
quand mon site sera termine il sera présenté a vous tous
afin d avoir les critiques
en attendant encore merci pour ces chouettes explications