Jump to content

Edit History

aamiot21

aamiot21


version était non précisée

Bonjour,

J'ai voulu éditer mon carousel avec un peu de code pour le rendre plus gros et qu'il prenne la totalité de la largeur de l'écran, donc j'ai attaché le module carousel au hook NavFullWidth dans apparence/positions puis j'ai crée un custom.css dans le dossier css dans assets du thème classic, celui installé sur mon serveur wamp.

J'ai attaché à mon message un screen qui montre comment le carousel se comporte désormais, c'est à dire qu'il évolue en dehors du container principal et je n'ai aucune idée de comment le remettre à l'intérieur. Si je change la margin-left de .carousel alors effectivement il reviens vers la droite mais c'est en lui rajoutant de la distance à la marge en "dur" donc ce n'est pas une option viable.

 

Voici le code dans custom.css (il vient du tuto de webaxx sur youtube, je mets le lien à la fin):

body.page-index #wrapper .container {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    
}
body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    
}
@media (min-width: 992px) {
    body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
        max-width: 940px;
   }
}
@media (min-width: 1200px) {
    body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
        max-width: 1140px;
   }
}
@media (max-width: 991px) {
    body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
        max-width: 100%;
   }
}
.carousel-control .icon-prev {
    margin-left: 0;
}
.carousel-control .icon-next {
    margin-right: 0;
}


.carousel .carousel-inner{height:100%; }
.carousel{box-shadow:none; }

Quelqu'un pourrait m'aider à le remettre à sa place ? Merci bcp

fullwidth.PNG

aamiot21

aamiot21

Bonjour,

J'ai voulu éditer mon carousel avec un peu de code pour le rendre plus gros et qu'il prenne la totalité de la largeur de l'écran, donc j'ai attaché le module carousel au hook NavFullWidth dans apparence/positions puis j'ai crée un custom.css dans le dossier css dans assets du thème classic, celui installé sur mon serveur wamp.

J'ai attaché à mon message un screen qui montre comment le carousel se comporte désormais, c'est à dire qu'il évolue en dehors du container principal et je n'ai aucune idée de comment le remettre à l'intérieur. Si je change la margin-left de .carousel alors effectivement il reviens vers la droite mais c'est en lui rajoutant de la distance à la marge en "dur" donc ce n'est pas une option viable.

 

Voici le code dans custom.css (il vient du tuto de webaxx sur youtube, je mets le lien à la fin):

body.page-index #wrapper .container {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    
}
body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    
}
@media (min-width: 992px) {
    body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
        max-width: 940px;
   }
}
@media (min-width: 1200px) {
    body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
        max-width: 1140px;
   }
}
@media (max-width: 991px) {
    body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
        max-width: 100%;
   }
}
.carousel-control .icon-prev {
    margin-left: 0;
}
.carousel-control .icon-next {
    margin-right: 0;
}


.carousel .carousel-inner{height:100%; }
.carousel{box-shadow:none; }

Quelqu'un pourrait m'aider à le remettre à sa place ? Merci bcp

fullwidth.PNG

aamiot21

aamiot21

Bonjour,

J'ai voulu éditer mon carousel avec un peu de code pour le rendre plus gros et qu'il prenne la totalité de la largeur de l'écran, donc j'ai attaché le module carousel au hook NavFullWidth dans apparence/positions puis j'ai crée un custom.css dans le dossier css dans assets du thème classic, celui installé sur mon serveur wamp.

J'ai attaché à mon message un screen qui montre comment le carousel se comporte désormais, c'est à dire qu'il évolue en dehors du container principal et je n'ai aucune idée de comment le remettre à l'intérieur. Si je change la margin-left de .carousel alors effectivement il reviens vers la droite mais c'est en lui rajoutant de la distance à la marge en "dur" donc ce n'est pas une option viable.

 

Voici le code dans custom.css (il vient du tuto de webaxx sur youtube, je mets le lien à la fin):

body.page-index #wrapper .container {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    
}
body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    
}
@media (min-width: 992px) {
    body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
        max-width: 940px;
   }
}
@media (min-width: 1200px) {
    body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
        max-width: 1140px;
   }
}
@media (max-width: 991px) {
    body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
        max-width: 100%;
   }
}
.carousel-control .icon-prev {
    margin-left: 0;
}
.carousel-control .icon-next {
    margin-right: 0;
}


.carousel .carousel-inner{height:100%;margin-left: center; }
.carousel{box-shadow:none; }

Quelqu'un pourrait m'aider à le remettre à sa place ? Merci bcp

fullwidth.PNG

×
×
  • Create New...