Jump to content
Frédéric09

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

Recommended Posts

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

post-1368158-0-03822300-1505813373_thumb.jpg

Edited by Frédéric09 (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

???

 

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.

Share this post


Link to post
Share on other sites

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 by doekia (see edit history)

Share this post


Link to post
Share on other sites

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>

 

post-1368158-0-22943300-1505816336_thumb.jpg

Edited by Frédéric09 (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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;
}
}

Share this post


Link to post
Share on other sites


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

<ul class="">

<li class="width5">

Share this post


Link to post
Share on other sites

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 by Frédéric09 (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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%;
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More