adaptation format téléphone (Créer un compte)

Accueil › Forums › Thèmes › adaptation format téléphone
  • WordPress :5.5
  • Statut : non résolu
10 sujets de 1 à 10 (sur un total de 10)
  • Auteur
    Messages
  • 11 novembre 2020 à 15 h 52 min #2359152
    perrine46000
    Participant
    Initié WordPress
    14 contributions

    Bonjour,

    Ma configuration WP actuelle 5.5.3

    • Version de PHP/MySQL :
    • Thème utilisé : Divi
    • Extensions en place : wpform
    • Nom de l’hébergeur : OVH
    • Adresse du site : http://www.love-forever.fr

    Problème(s) rencontré(s) :

     

    Coucou tout le monde,

    (sans blague sur mon nom de domaine, c’est un site “poubelle” que j’utilise pour faire des tests)

    J’essaie donc d’apprendre Divi, et j’ai téléchargé un modèle… mais quand je regarde mon travail en taille “smartphone” c’est vraiment vilain!!!

    Qu’est ce que j’ai mal fait?

     

    Merci d’avance

    11 novembre 2020 à 17 h 11 min #2359160
    mathieu42
    Participant
    Chevalier WordPress
    133 contributions

    votre site a déjà plusieurs effets responsifs comme par exemple le passage de 2 à 1 colonne quand la largeur passe en dessous de 980 pixels.

    donc c’est déjà beaucoup mieux que sans ce genre d’effet. qu’est ce que vous souhaiteriez avoir en plus ?

     

    personnellement, je trouve juste que l’image d’entête prend beaucoup de place sur les petits écrans mais le reste du contenu est totalement accessible.

    13 novembre 2020 à 9 h 58 min #2359416
    perrine46000
    Participant
    Initié WordPress
    14 contributions

    Merci mathieu,

     

    Et bien par exemple, ce qui me dérange c’est le titre “choisissez un monde plus zen” .. les lettres paraissent mélangées sur smartphone…

     

    Ensuite, les bords droits et gauches des textes “disparaissent” on ne peut pas lire en entier. Vous le voyez?

    13 novembre 2020 à 14 h 28 min #2359460
    ferman
    Participant
    Maître WordPress
    3217 contributions

    Bonjour,

    Essayez avec ces CSS:

    @media screen and (max-width:1024px){
.et_pb_text_inner{max-width:100%;
font-size:40px;
line-height:1.5em;
text-align:center;}
}

    14 novembre 2020 à 9 h 25 min #2359552
    perrine46000
    Participant
    Initié WordPress
    14 contributions

    Oh Yeees! ça fonctionne super pour le titre, merci!!

    Par contre , sur les textes, les bordures sont toujours tronquées et les caractères très gros (sur le téléphone)… voir photos

    Puis-je faire autre chose?

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    14 novembre 2020 à 12 h 38 min #2359571
    ferman
    Participant
    Maître WordPress
    3217 contributions

    Bonjour,

    Je n’avais pas été plus bas que les titres. Voici des CSS pour le texte.

    @media screen and (max-width:1024px){	
	[class*="et_pb_text"]{width:95%;
	}	
.et_pb_row .et_pb_module .et_pb_text_inner p,.et_pb_text_inner h2 {max-width:100%;
	font-size:16px;
	padding-left:30px;
	line-height:1.5em;
	text-align:center;
	}
}

     

    Une remarque:

    Cela n’a pas été facile car les CSS sont assez complexes (je n’aime pas les constructeurs de page) et surtout les paragraphes ne sont pas construits de manière homogène (pas la même largeur, pas les mêmes “paddings”) alors qu’il n’y a aucune raison à cela. Pour trouver un point commun à tous les paragraphes ce n’est pas évident. Je pense donc qu’il y a un problème de conception à la base: le format des paragraphes devrait être uniforme. Là on essaie de rattraper avec des CSS mais ce n’est pas idéal. Il y aura encore sans doute des choses à modifier dans le code CSS ci-dessous (taille des lettres, padding, alignement du texte:center, left, right). A vous de vérifier  mais je pense que ça constitue une base de départ correcte. De toute façon s’il y a un problème vous pouvez demander.

    15 novembre 2020 à 14 h 48 min #2359662
    perrine46000
    Participant
    Initié WordPress
    14 contributions

    alors.. je ne comprends pas tout ce que vous dites.. Mais ça a marché! Merci

    Concernant les paragraphes qui ne sont pas homogènes, là, c’est de ma faute: désolée. En fait j’apprends toute seule, et c’est certainement moi qui ai dû bidouiller quelquechose sans le vouloir.

    Effectivement, le rendu “n’est pas idéal”, mais c’est déjà très bien pour moi.

     

    Encore MERCI 😉

    16 novembre 2020 à 15 h 29 min #2359760
    perrine46000
    Participant
    Initié WordPress
    14 contributions

    Hello ferman,

     

    Je viens de créer une nouvelle section sans la bidouiller. C’est la section: “Le bleu est une couleur classique considérée comme …” avec la photo d’une rose.

    Encore quelques questions si vous le voulez bien, puis je vous laisserai tranquille….

    1. je me demande suis les marges blanches à droite et gauche sont à la bonne largeur . Elles me paraissent un peu large sur PC, mais c’est peu être juste une impression? quelle est la “norme” en la matière?
    2. sur PC le texte est aligné à gauche, mais sur smartphone, il est centré. Quel est le réglage pour le mettre à gauche aussi en version smartphone?
    3. La longueur du texte est plus petite que la hauteur de la photo. Des fois c’est l’inverse.. que dois-je régler pour que ce soit identique et ainsi éviter le “vide”?

     

    Merci beaucoup d’avance!

    Ce forum a-t-il été créé pour ce genre de choses? je pose beaucoup de question et je ne voudrais pas gêner…

     

    16 novembre 2020 à 18 h 17 min #2359785
    ferman
    Participant
    Maître WordPress
    3217 contributions

    Bonjour,

    Je peux répondre à la question 2. Il suffit dans le code que je vous avais donné de remplacer” center ” par ” left ” dans text-align.

    Pour les autres questions, les deux nouveaux paragraphes n’ont pas les mêmes styles que les autres. C’est ce je vous disais déjà  précédemment. Je pense qu’il faudrait revoir la conception du site et l’utilisation de “divi-builder”. C’est un apprentissage à faire. Pour ma part je ne peux pas vous aider car je n’utilise pas Divi.

    Ce forum a-t-il été créé pour ce genre de choses? je pose beaucoup de question et je ne voudrais pas gêner…

    Le nombre de questions n’importe pas, le forum est là pour répondre aux questions. Par contre les questions portant sur un thème ou une extension payants ne sont pas du ressort de ce forum. Pour une raison simple: à moins de l’utiliser soi même,  on n’a pas accès  aux fichiers du thème.  Donc tout ce qui se rapporte à la mise en page du site est inaccessible. On peut faire quelques modifications CSS comme on a fait jusqu’à présent mais ça vient à la fin, pour fignoler. Avec un  thème comme Divi, vous devez pouvoir quasiment tout faire mais il faut apprendre à l’utiliser. Comme vous avez acheté le thème vous avez aussi accès à leur support; ils seront mieux à même de répondre à vos questions.

    Pour les marges à droite et à gauche, il n’y a pas de règle, c’est une question de goût. Vous pouvez choisir le modèle de page (par défaut, full width) , ce qui fera déjà une grosse différence puis sans doute la largeur dans les réglages de Divi. Mais je ne peux pas en dire plus.

    • Cette réponse a été modifiée le il y a 4 jours et 14 heures par ferman.
    • Cette réponse a été modifiée le il y a 4 jours et 14 heures par ferman.
    16 novembre 2020 à 19 h 38 min #2359793
    perrine46000
    Participant
    Initié WordPress
    14 contributions

    Déjà c’est super cool! Merci je vais chercher d’avantages 🙂

    et éventuellement voir le support Divi (s’ils parlent français)

     

    Bonne soirée

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
  • Auteur
    Messages
10 sujets de 1 à 10 (sur un total de 10)
  • Vous devez être connecté pour répondre à ce sujet.