Prestashop Responsive

[Iciailleurs]

Bonjour,

Autre sujet: Prestashop est responsive, alors comment se fait-il que des textes et des images sortent de l'écran sur les tablettes et les smartphones ? Notamment si j'utilise les images dans les catégories.

Cordialement.

[Eolia]

Prestashop n'est pas responsive mais les thèmes utilisés peuvent/doivent l'être.

Si vos images sortent c'est que le css utilisé n'est pas conforme ou a été modifié. A voir avec leur auteur (du thème ou des modules)

[Iciailleurs]

Bonjour,

non, il ne s'agit pas d'un module ajouté, mais des fenêtres des catégories.

Ouvrez ce lien dans un smartphone ou sur une tablette, et l'image se trouvera à l'extérieur de l'écran.

Bonne journée.

[Iciailleurs]

J'ai oublié le lien : https://www.torrefactiondunoise.fr/4-thes-bios

Pardon!

[Eolia]

Elle n'est pas en dehors de l'écran, le code css de votre thème dit simplement de ne pas l'afficher^^

[Iciailleurs]

Quand vous faites un geste de droite à gauche et que l'image apparait, en Français cela se nomme hors de l'écran, l'image et bel et bien affichée.

[Mediacom87]

Bonjour,

Actuellement aucune image ne déborde, dépasse ou grignote quoi que se soit mais par  contre lorsque l'on colle un tableau à dimensions fixe ben, ça dépasse.

Alors, n'utilisez pas de tableau pour présenter 3 lignes de texte et tout devrait rentrer dans l'ordre.

[Iciailleurs]

J'ajoute un peu plus de trois lignes de texte, mais effectivement tout est rentré dans l'ordre.

Les photos ne doivent pas dépasser 300px au maximum 350 px.

Mais, je regrette qu'on ne puisse facilement pas attribuer une couleur différente par catégorie, exemple le design pour le café pourrait être différent de celui du thé notamment dans l'entête.

On fera avec...

Cordialement.

[c00lsp0t]

Sinon une solution serait d'utiliser le CSS pour redimensionner à la vollée (même si ca pénalise le chargement de la page vu que le navigateur doit traiter éventuellement le redimensionnement de l'image)

Par exemple pour ne pas que vos image depasse du cadre dans le bloc de description de vos categories vous pouvez ajouter cette règle CSS

#category-description img {
	max-width: 100%;
	height: auto;
}

Il faut bien sur que vos balise img n'ait pas d'attribut width et height de défini en dur.

Edited September 12, 2020 by c00lsp0t (see edit history)

[Iciailleurs]

Bonjour,

Je retiens votre solution, mais j'ai modifié la mise en page du bloc de description des catégories en supprimant les tableaux et en mettent la photo sous le texte à la taille de 320px maximum.

Je vais voir ce que Google Console me signifiera comme erreur.

Bonne journée