Bonjour,
Je réalise un carousel sur la première page de mon site avec bootstrap.
Ce site je le fais en "mobile-first" et donc je commence par <576.
En pj vous trouverez son aspect actuel.
Or j'aimerais que que mon .carousel-control-prev soit collé à droite de l'écran.
J'ai donc ajouté à mon style css :
Or, si le .carousel-control-next réagit bien à son assignation "right: 18px;", il n'en est rien pour le .carousel-control-prev qui reste à gauche.
Si je regarde l'élément sur l'inspecteur firefox je vois :
style.css:14 (qui correspond à la ligne de mon style css)
.carousel-control-prev {
right: 50px;
height: 30px;
width: 30px;
margin-top: -10px;
}
et en dessous:
_carousel.scss:111
.carousel-control-prev {
left: 0;
En mots simples le _scss semble l'"emporter" sur le css.
Comment faire changer le left en right sachant que je n'y connais rien en _scss, que je n'ai pas envie de complexifier le site (ou ma tête).
La solution de forcer le margin-left ne convient pas car elle réagit mal au responsive.
Enfin, pour la configuration min-width:768px, je veux que les .carousel-control soient collés à gauche de l'écran et là, le .carousel-control-next accepte de passer en left même si le _carousel.scss lui assigne par défaut la position right.
J'espère avoir été clair dans mes explications et que vous saurez m'a ider !
Je réalise un carousel sur la première page de mon site avec bootstrap.
Ce site je le fais en "mobile-first" et donc je commence par <576.
En pj vous trouverez son aspect actuel.
Or j'aimerais que que mon .carousel-control-prev soit collé à droite de l'écran.
J'ai donc ajouté à mon style css :
.carousel-control-prev {right: 50px; height: 30px; width:30px; margin-top: -10px;}
.carousel-control-next {right: 18px; height: 30px; width:30px; margin-top: -10px;}
Or, si le .carousel-control-next réagit bien à son assignation "right: 18px;", il n'en est rien pour le .carousel-control-prev qui reste à gauche.
Si je regarde l'élément sur l'inspecteur firefox je vois :
style.css:14 (qui correspond à la ligne de mon style css)
.carousel-control-prev {
right: 50px;
height: 30px;
width: 30px;
margin-top: -10px;
}
et en dessous:
_carousel.scss:111
.carousel-control-prev {
left: 0;
En mots simples le _scss semble l'"emporter" sur le css.
Comment faire changer le left en right sachant que je n'y connais rien en _scss, que je n'ai pas envie de complexifier le site (ou ma tête).
La solution de forcer le margin-left ne convient pas car elle réagit mal au responsive.
Enfin, pour la configuration min-width:768px, je veux que les .carousel-control soient collés à gauche de l'écran et là, le .carousel-control-next accepte de passer en left même si le _carousel.scss lui assigne par défaut la position right.
.carousel-control-prev {left:5px; margin-top: 29px;}
.carousel-control-next {left: 5px; margin-top: 18px;}
J'espère avoir été clair dans mes explications et que vous saurez m'a ider !