Bonjour,

Je travaille actuellement à la réalisation d'un carousel Bootstrap pour l'intégrer à mon site.

Sur mon écran de pc je suis parvenu à l'adapter à ce que je voulais. (changer couleur boutons "prev et next, la couleur des indicateurs, supprimer l'ombre sur les cotés..etc)

Quand je diminue la taille de mon écran j'essaie d'appliquer les media queries et c'est là que je bloque depuis 2 jours...j'arrive à diminuer ma fenêtre en largeur, mais pas en hauteur. Et en plus mon carousel se décale sur la gauche.

Pour le code html c'est le celui de Bootstrap avec juste 2/3 modifs :

            <div class="row">
                <div class="col-md-12">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="5"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="6"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="7"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="8"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="9"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="10"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="11"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="12"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="13"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="14"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="15"></li>
                            
                        </ol>

                        <!-- Wrapper for slides -->
 
  
  <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="peintures/01.jpg" alt="">
                                <div class="carousel-caption">
                                  </div>

                                  <div class="legende01">
                                    <p>195 x 97 cm</p></div>
                            </div>

                            <div class="item">
                                <img src="peintures/02.jpg" alt="">
                                <div class="carousel-caption">
                                     <p>250 x 150 cm</p>
                                   </div></div>


                            <div class="item">
                                <img src="peintures/03.jpg" alt="">
                            <div class="carousel-caption">
                                     <p>160 x 160 cm</p>
                                   </div></div>

                                    <div class="item">
                                <img src="peintures/04.jpg" alt="">
                            <div class="carousel-caption">
                                     <p>120 x 120 cm</p>
                                   </div></div>

                                    <div class="item">
                                <img src="peintures/05.jpg" alt="">
                            <div class="carousel-caption">
                                     <p>120 x 120 cm</p>
                                   </div></div>

Et voici pour le css :

body {font-family: 'Josefin Sans', sans-serif, Verdana; background-color:#ececec;}



.carousel-inner{
	width:100%;
	height:660px;
	border:1px solid red;
	}
.carousel-inner > .item > img {
    margin: 0 auto;
   }

.jeanlerin{
  word-spacing: 2px;
  text-align:center;
  letter-spacing:4px;
  font-size:4.0em;
  padding-top: 5px;
}

.separator {
  height:1px;
  width:53%;
  border:none;
  box-shadow:none;
  background-color: black;
}

.menu {
    word-spacing:30px;
  text-align: center;
  font-size: 2.0em;
}

.menu a{
  text-decoration: none;
  color:#8D8D8D;
 }

 .menu a:hover{color:black;
 }

 .glyphicon.glyphicon-chevron-right{
   color:black;
}

.glyphicon.glyphicon-chevron-left{
   color:black;
}

.carousel-control.left, .carousel-control.right {
   background-image:none !important;
   filter:none !important;
}

.carousel-indicators {
  bottom:-50px;
}

.carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 3px;
    text-indent: 0;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background-color: #8D8D8D;
      
}
.carousel-indicators .active {
    width: 10px;
    height: 10px;
    margin: 3px;
    background-color: #000000;
}



.carousel-control.left .glyphicon {
    left: 0;
    margin-left: 0;
}
.carousel-control.right .glyphicon {
    right: 0;
    margin-right: 0;
}

.legende01 {
	text-align: center;
	font-size: 1.2em;
}

.carousel-caption{bottom: -60px;color:black; }

/*********************************************************************************************/


 @media screen and (max-width: 1300px)
{
   .carousel {
  width:640px;
  height:360px;
}
.jeanlerin{font-size: 2.0em;}

.menu {font-size: 1.5em;}

.separator{width: 30%;}

.carousel-indicators {
  bottom:-350px;
}

.carousel-inner > .item > img {
    text-align: center;
}







}
 

Je vous remercie par avance pour votre aide.