1.6.0.6 Problème d'affichage du bloc réassurance

[Frédéric09]

Bonjour à tous,

 

Sur Prestashop 1.6.0.6 avec un thème installé, j'ai un souci d'affichage avec le bloc réassurance. Les images sont les une sur les autres sur un seul bloc, voir fichier joint.
Étant novice, pourriez-vous m'orienter sur un fichier peut être à modifier?  si quelqu'un à déjà eu le même problème?

Merci

Edited September 19, 2017 by Frédéric09 (see edit history)

[doekia]

Cela doit bien être la 1ere fois que quelqu'un se mélange les crayons dans les css et les templates de sa solutions en souhaitant bricoler avant d'avoir compris les bases.

C'est également la 1ere fois que l'on voit quelqu'un ayant fait autant de recherche avant de quémander de l'aide malgré un investissement personnel qui force le respect.

 

Chapeau.

[Frédéric09]

???

 

Je n'ai rien touché, j'ai juste activé le réassurance et je vois que cela s'affiche mal. J'ai trouver des sujets similaire mais qui n'ont pas de solution et ne sont pas dans la même version de prestashop. Je ne cherche justement pas à bricoler je n'ai pas assez de connaissance en css pour cela.

[doekia]

tu parles d'avoir ajouté des espaces... ousque? j'ai compris: bricolé dans les templates

 

Sinon comme un as un thème payant, il faut remonter le problème au développeur de ce dernier

Edited September 19, 2017 by doekia (see edit history)

[Frédéric09]

Désolé je me suis mal exprimé, j'essaie de me dépatouiller avec firebug mais j’apprends sur le fait.

Sur firebug, en mettant <ul class=  sur "auto" au lieu de "width5", les images ne sont plus les unes sur les autres mais toutes en vertical. Y a du mieux

Tu pense que c'est vraiment le thème qui fait cela?

La date d'intervention du dev est passé depuis un moment, il faut que je paye une intervention, c'est pour ça que j'essaie de trouver une solution avec mes moyens.

 

<div id="reinsurance-custom-wrapper">

<div id="reinsurance-custom-block" class="clearfix">

<ul class="auto">

<li>

<i class="icon" data-icon=""></i>

<strong class="title">Satisfait ou remboursé</strong>

<div class="rte">Lorem ipsum dolor sit amet, consectetur adipiscing elit </div>

 

Edited September 19, 2017 by Frédéric09 (see edit history)

[doekia]

je pense plutot que ton <div id="reinsurance-custom-wrapper"> ne fait pas 100% (probablement width12) ce qui cause le width5 à être trop petit

 

Mais encore une fois si tu n'as pas l'ombre d'une idée de comment faire, comment par te documenter et faire des recherche ou fait directement appel à un dev, tu y gagneras du temps et de l'énergie

[Frédéric09]

Cela n'est pas marqué, voilà ce qui a dans le fichier:

 

#reinsurance-custom-wrapper {

    clear: both;

    margin-top: 20px;

}

#reinsurance-custom-block .icon {

    background-color: #ddd;

    border-radius: 50%;

    color: #fff;

    display: inline-block;

    float: left;

    font-size: 1.6em;

    font-weight: normal;

    height: 60px;

    line-height: 60px;

    margin-right: 10px;

    text-align: center;

    transition-duration: 0.2s;

    transition-property: font-size, background-color;

    transition-timing-function: ease-out;

    width: 60px;

}

#reinsurance-custom-block [data-icon]::before {

    content: attr(data-icon);

    font-family: "FontAwesome";

    font-size: 1.5em;

}

#reinsurance-custom-block li {

    float: left;

    font-size: 13px;

    padding: 15px 10px;

}

#reinsurance-custom-block .width1 li {

    width: 100%;

}

#reinsurance-custom-block .width2 li {

    width: 50%;

}

#reinsurance-custom-block .width3 li {

    width: 33.33%;

}

#reinsurance-custom-block .width4 li {

    width: 25%;

}

#reinsurance-custom-block .width5 li {

    width: 20%;

}

#reinsurance-custom-block li div.rte {

    float: left;

    margin-top: 15px;

}

#reinsurance-custom-block li strong.title {

    float: left;

    padding-top: 12px;

    text-transform: uppercase;

    vertical-align: middle;

    width: 65%;

}

#reinsurance-custom-block li:hover .icon {

    background-color: #333;

    font-size: 2em;

}

@media (max-width: 768px) {

#reinsurance-custom-block li {

    border-bottom: 1px dashed #d9d9d9;

    float: left;

    padding: 25px 10px;

    width: 100%;

}

#reinsurance-custom-block li:first-child {

    border-top: 1px dashed #d9d9d9;

}

#reinsurance-custom-block li:hover {

    background-color: #f2f2f2;

}

}

[doekia]

<div id="reinsurance-custom-block" class="width1 clearfix">

<ul class="">

<li class="width5">

[Frédéric09]

Le bloc est aligné verticalement au lieu de horizontalement.

Merci d'avoir pris de ton temps pour essayer de trouver une solution, je laisse tomber je vais demander à une personne plus qualifier que moi de voir ou est le problème.

Je remonterai la solution sur le forum une fois le problème résolu.
Merci
 

Edited September 19, 2017 by Frédéric09 (see edit history)

[doekia]

ça ne sert à rien que tu remonte. ton problème est spécifique à ton thème. ta solution ne pourra servir que ton install.

[Frédéric09]

ok très bien,

merci

[Ariane Web et Plus]

Bonjour,

Avez-vous une url à communiquer.

 

Bonne journée

[Frédéric09]

Bonjour,

 

Oui bien sur: http://dev.futaine.com/

 

C'est une copie du site que je désactive quand j'ai fait mes test.

Merci

[Ariane Web et Plus]

Je vous envoie mon ip en mp car la boutique est en maintenance.

[Ariane Web et Plus]

Il y a un sélecteur qui prend le dessus sur le theme il met une taille de 180px aux ul du footer.

 

Il faut mettre :

#reinsurance-custom-block ul {
    width: 100%;
}

Soit simplement dans le global.css à la fin sinon l'idéal serait dans le css du module mais il faut le dupliquer dans le thème.

 

Bonne journée

[Frédéric09]

Dans le css du module il y a deux fichiers:

style.css et style15.css

J'ai donc ajouter à la fin votre code et dupliquer le module dans le thème. Mais cela ne change rien: Voici le code du fichier "style.css"

#reinsurance-custom-wrapper{
    clear:both;
    margin-top:20px;
}
#reinsurance-custom-block .icon {
    display: inline-block;
    float:left;
    font-weight: normal;
    font-size:1.6em;
    color:#fff;
    text-align:center;
    background-color:#6F6D6D;
    height:60px;
    line-height:60px;
    width:60px;
    margin-right:10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition-property: font-size, background-color;
    -webkit-transition-duration: .2s;
    -webkit-transition-timing-function:  ease-out;
    -moz-transition-property: font-size, background-color;
    -moz-transition-duration: .2s;
    -moz-transition-timing-function: ease-out;
    transition-property: font-size, background-color;
    transition-duration: .2s;
    transition-timing-function: ease-out;
}
#reinsurance-custom-block [data-icon]:before{
    content: attr(data-icon);
    font-size:1.5em;
    font-family: "FontAwesome";
    -webkit-font-smoothing: antialiased;
}
#reinsurance-custom-block li {
    float:left;
    padding:15px 10px !important;
    font-size:13px;
}
#reinsurance-custom-block .width1 li {width:100%;}
#reinsurance-custom-block .width2 li {width:50%;}
#reinsurance-custom-block .width3 li {width:33.33%;}
#reinsurance-custom-block .width4 li {width:25%;}
#reinsurance-custom-block .width5 li {width:20%;}

#reinsurance-custom-block li div.rte {
    float:left;
    margin-top: 15px;
}

#reinsurance-custom-block li strong.title {
    float:left;
    width:65%;
    vertical-align: middle;
    padding-top:12px;
    text-transform:uppercase;
}
#reinsurance-custom-block li:hover .icon {
    font-size:2em;
    background-color:#333;
}

@media (max-width: 768px) {
    #reinsurance-custom-block li {
        float:left;
        padding:25px 10px !important;
        width:100% !important;
        border-bottom: 1px dashed #d9d9d9;
    }
    #reinsurance-custom-block li:first-child {
        border-top: 1px dashed #d9d9d9;
    }
    #reinsurance-custom-block li:hover {
        background-color:#f2f2f2;
    }
}
#reinsurance-custom-block ul {
    width: 100%;
}

[Ariane Web et Plus]

mettez #footer #reinsurance-custom-block ul comme sélecteur à la place de #reinsurance-custom-block ul

[Frédéric09]

Bonjour,

 

super cela fonctionne, je vous remercie beaucoup de ce coup de main.

 

A bientôt.