Texte qui sort de l'écran sur mobile

[florente09]

Bonjour à tous,

J'ai un souci sur prestashop 1.6, dans la fiche article en rentrant des caractéristiques, le texte sort de l'écran sur mobile, pourtant mon thème est bien responsive.
En fichier joint une capture d'écran pour voir le problème et voici le css en de la box en question:

#buy_block .feature_line{border-bottom: 1px solid rgba(0, 0, 0, 0.06);padding: 10px 0px;overflow: auto;overflow-y: hidden;}
.feature_line{border-bottom: 1px solid rgba(0, 0, 0, 0.06);padding: 20px 0px;}
.feature_line_left{}
.feature_line_right{float: right;white-space:nowrap;}

Que dois je faire pour que le texte revienne à la ligne?
En vous en remerciant par avance,

Cordialement.

Fred

[Ryan Hidri]

attribue lui un width et un height (width en % et de prefrence height: auto)

si ton site est en ligne, merci de nous fournir son lien

[florente09]

Bonjour Ryan,

c'est mieux en rajoutant un height et un width sur écran mobile, mais du coup, sur un écran normal, cela me décale sur la gauche les onglets du bas, référence, dimension et quantité et cela n'est pas propre.

www.futaine.com

Une idée pour palier à cela?
Cordialement,

Fred

[Ryan Hidri]

regarde ce bloc au niveau du fichier themes/futaine/css/product.css (ligne 556)

.feature_line_right {
    float: right;
    white-space: nowrap;
}

tu elimine la ligne

    white-space: nowrap;
 

[florente09]

Sur les plus petit écran le texte sort du cadre malheureusement, il ne revient pas à la ligne.

[Ryan Hidri]

essaye de mettre la media query suivante dans ton fichier css:
 

@media (max-width: 370px)
{
  .feature_line {
 
    min-height: 85px;
    height: 63px;
	}

}

explication :

c'est à partir de 370px de laerageure qu'on remarque un retour à la ligne, donc on met une hauteur correspondant à deux lignes.

et pour

.feature_line_right {
    float: right;
    white-space: normal;
    height: auto;
}

mets white-space: normal;

 

[florente09]

Bonjour,

Désolé mais à quel endroit du css ci-dessous je dois mettre la média query ?

#buy_block .feature_line{border-bottom: 1px solid rgba(0, 0, 0, 0.06);padding: 10px 0px;overflow: auto;overflow-y: hidden;}
.feature_line{border-bottom: 1px solid rgba(0, 0, 0, 0.06);padding: 20px 0px;}
.feature_line_left{}
.feature_line_right{float: right;}

Merci

 

[Ryan Hidri]

pour .feature_line_right tu mets

.feature_line_right {
    float: right;
    white-space: normal;
    height: auto;
}

et la media query tu la mets vers la fin

 

[florente09]

Je te remercie, le texte est complet maintenant, j'ai rentré le code comme  ci-dessous.
Le problème maintenant qui est esthétique, voir fichier joint, le second texte des caractéristique ne sont pas tous aligné.
Est il possible d'obliger ce texte à commencer sur la gauche ?
Je ne peux pas mettre une photo, cela ne fonctionne pas,
exemple:

Garantie: (titre de la caractéristique)
5 ans contre tous défaut de fabrication (valeur de la caractéristique)

 

#buy_block .feature_line{border-bottom: 1px solid rgba(0, 0, 0, 0.06);padding: 10px 0px;overflow: auto;overflow-y: hidden;}
.feature_line{border-bottom: 1px solid rgba(0, 0, 0, 0.06);padding: 20px 0px;}
.feature_line_left{}
.feature_line_right{float: right;white-space:normal;height:auto;}

@media (max-width: 370px)
{
.feature_line {min-height: 85px;height: 63px;}
}

 

Merci

[Ryan Hidri]

tu fais ceci, merci de tester avant sur la console et de garder une copie de ton fichier

 

@media (max-width: 370px)
{
    .feature_line_right {
        float: left;
        white-space: normal;
    }
    .feature_line {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        padding: 10px 0px;
        height: 70px;
    }
}