[RESOLU]Pages cms responsives

[decembre]

Bonjour,
J'utilise PS 8.1.7
J'ai créé un blog avec les pages cms mais celles-ci ne sont pas responsives
alors que celles du footer "Ma société/politique confidentialité/cgv/etc..." le sont.
Comment faire pour que ces nouvelles pages du blog le soient ?
Merci pour vos réponses.
Cordialement.

Edited October 19, 2024 by decembre
RESOLU (see edit history)

[Divine]

Bonjour,

Une capture d'écran pour nous montrer ça peut-être ?

[decembre]

Bonjour Divine,
Juste une explication :
j'écris ceci sur une page cms "Apparence/Page/Ajouter une page ou j'ajoute une photo ou une vidéo
On peut la lire sur un PC telle quelle mais sur un mobile elle est plus large que l'écran de ce-dernier.
(sauf les pages déjà existantes telle que "Livraison, politique de confidentalité, Mention légale etc ...
qui elles s'adaptent à la largeur du mobile et donc responsives).

Je suis donc obligé de ne pas dépasser 240 de large (<table width="240")
Exemple :
j'écris ceci sur une page cms "Apparence/Page/Ajouter
une page ou j'ajoute une photo ou une vidéo On peut la
lire sur un PC telle quelle mais sur un mobile elle est
plus large que l'écran de ce-dernier. (sauf les pages déjà
existantes telle que "Livraison, politique de confidentalité,
Mention légale etc ... qui elles s'adaptent à la largeur du
mobile Je suis donc obligé de ne pas dépasser 240 de large
(<table width="240").

Sur PS 1.7., j'ai vu qu'il est possible de corriger ce problème
en ajoutant un script au fichier custom.css qui n'existe pas sur 
PS8.1

Bonne journée.
 

[Mediacom87]

Bonjour,

dans le fichier custom.css de votre thème, rajoutez simplement ceci :

img {
	max-width:100%;
}

Et pour cela, il suffit de créer simplement le fichier custom.css dans le répertoire du thème où se trouve theme.css.

Ce fichier custom.css n'est plus présent nativement pour qu'il ne soit pas écrasé lors d'une mise à jour du thème.

Edited October 19, 2024 by Mediacom87 (see edit history)

[decembre]

Bonjour Médiacom87,
J'ai ajouté le fichier custom.css dans "theme/classic/asset/css"
et ajouté le script que vous m'avez donné.
img
{ max-width:100%;
}
Ce message indique donc la marche à suivre pour résoudre ce problème.
Je marque le sujet RESOLU 
Merci à vous et bon WE.

Edited October 19, 2024 by decembre (see edit history)

[decembre]

Bonjour Médiacom87, 
Je reprends le sujet car les pages sont responsives uniquement avec le texte,
mais pas avec les vidéos et les photos.
Cordialement.

[Mediacom87]

Ok, à un moment si vous voulez que l'on aide sur du CSS, il faut avoir accès au site.

[decembre]

Bonjour,
Voilà le lien de ma page.
Si on la regarde sur pc, pas de problèmes.
Mais sur mobile, le texte est bien adapté à la largeur de l'écran.
Ce qui nest pa le cas pour la dernière photo que j'ai agrandi spécialement
pour que vous voyiez qu'elle ne s'adapte pas, elle est plus large que l'écran.
 https://sergemauro.fr/content/10-les-bracelets-unisex

Fichier custom.css

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

img {
    max-width:100%;
}
 

[Mediacom87]

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

 

[decembre]

Bonjour,

Bien qu'ayant modifié le fichier custode.css, il n'est pas possible d'avoir des photos et vidéos de plus de 320 de large.

Par contre le texte est responsive. Il s'adapte donc à la largeur de l'écran du mobile.

Pour ma part, ça me convient comme ça.

Cordialement.

 

[Divine]

On retrouve ces attributs HTML sur vos images :

width="320" height="320"

Cela signifie que vous avez défini une largeur et une hauteur à 320px sur vos images, certainement depuis votre éditeur. Il vous suffit donc de mettre les bonnes dimensions depuis votre éditeur en back-office.

[decembre]

Bonjour Divine,

Les images font 800 x 800.

Je les ai mise en 320 x 320 car si elles sont d'une plus grand taille,

elles ne sont pas responsives sur mobile.

A moins que vous ne parliez d'autre chose.

Cordialement.

[Divine]

Normal qu'elles ne le soient pas, vous n'avez pas appliqué la modification indiquée par Mediacom87 :

Le 20/10/2024 à 1:35 PM, Mediacom87 a dit :

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

 

Il faut rajouter le height: auto. Ensuite vous pourrez mettre les bonnes dimensions à vos images et elles seront bien responsives.

[decembre]

Bonjour Divine,
Le résultat est le même.
Je vais acheter un module.
Cordialement.

[Divine]

Bonjour,

Bin si cela fonctionne. Par contre vous avez laissé les dimensions 320x320 px. Mettez les bonnes dimensions sur vos images (800x800 px) et vous verrez qu'elles sont bien responsives.