[Résolu] Modifier les marges d’une page uniquement en version mobile (Créer un compte)

  • WordPress :4.9.4
  • Statut : résolu
12 sujets de 1 à 12 (sur un total de 12)
  • Auteur
    Messages
  • #2154849
    sonia75
    Participant
    Padawan WordPress
    70 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Thème utilisé : Graphene
    • Nom de l’hébergeur : OVH

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

    Je reviens vers vous car j’ai précédemment demandé à modifié les marges d’une page (https://wpfr.net/support/sujet/comment-mettre-en-forme-une-page-wordpress-changer-taille-des-marges/). Le code de Phil a bien fonctionné, en tout cas sur la version ordinateur :

    .page #content {padding-left: 100px ;padding-right: 100px}

    Toutefois en vérifiant le design sur un smartphone, la version mobile du blog, je me rends compte que le texte s’affiche de façon trop ratatinée (étroite). Du coup je pense que la version « full width » serait plus adaptée probablement à la version mobile.

    De plus le tableau que j’ai réalisé étant trop ratatiné, les données des cases ne sont pas visibles lorsqu’on tient son téléphone à la verticale, il faut le positionner à l’horizontal pour voir ce tableau correctement (ce qui n’est pas pratique ni ergonomique…).

    Du coup ma question était de savoir comment je pourrais afficher la même page avec des marges à 100px pour la version desktop comme actuellement mais avoir un « full width » pour la version mobile si jamais cela serait faisable ?

    Mille mercis par avance à ceux qui pourront me renseigner !

     

    • Ce sujet a été modifié le il y a 4 années et 6 mois par sonia75.
    #2154888
    PhiLyon
    Modérateur
    Maître WordPress
    28277 contributions
    #2155038
    sonia75
    Participant
    Padawan WordPress
    70 contributions

    Merci Phil pour l’explication et le lien. J’ai regardé mais j’avoue avoir du mal à savoir quel intitulé mettre pour désigner la page spécifiquement (page content, page ou bloc_page ou autre ?), idem pour la largeur si je dois mettre « full » ou « auto » comme indiqué dans le tuto ?

    Du coup, j’ai écrit ce code, pourrais tu me donner ton avis stp ? 🙂

    @media all and (max-width: 767px) {
            #page {
    			width: auto ;
                    
            }
    }

    Mille mercis par avance et bonne journée !

     

    PS : est-ce que j’insère ce code ensuite dans le CSS du thème enfant ou dans le CSS additionnel (au fait quelle différence entre les 2) 🙂 ?

    Merci encore !

    • Cette réponse a été modifiée le il y a 4 années et 6 mois par sonia75.
    #2155046
    PhiLyon
    Modérateur
    Maître WordPress
    28277 contributions

    Bonjour.

    Essaies déjà dans le style.css de ton thème enfant.

    🙂

     

    #2155084
    sonia75
    Participant
    Padawan WordPress
    70 contributions

    OK merci bien, je viens d’insérer mon code dans le style.css du thème enfant et ça n’a rien changé… 🙁

    Une idée du code que je pourrai mettre pour avoir la bonne largeur appliquée sur les téléphones ?

     

    merci encore !

    #2155115
    PhiLyon
    Modérateur
    Maître WordPress
    28277 contributions

    Avec l’adresse du site ce serait plus facile.

    🙂

    #2155120
    sonia75
    Participant
    Padawan WordPress
    70 contributions

    Oui, je m’excuse une nouvelle fois de ne pouvoir donner l’adresse car j’ai des données personnelles sur ce blog 🙁

    Est-il possible malgré tout de savoir svp si la nomenclature de mon code proposé ci-dessus est correct.  J’ai hésité sur l’intitulé pour désigner la page spécifiquement (page content, page ou bloc_page ou autre ?), idem pour la largeur si je dois mettre « full » peut-être à la place d’« auto » ?
    Mon code n’a pas l’air d’être reconnu car ça n’a rien changé…

    Grand merci encore de toute aide qui pourra m’être apportée sur cette requête 🙂

    #2155121
    PhiLyon
    Modérateur
    Maître WordPress
    28277 contributions

    Essaies avec le code précédent

    .page #content {width:auto;}

    🙂

    #2155206
    sonia75
    Participant
    Padawan WordPress
    70 contributions

    Merci Phil, j’ai mis ce code (tel quel) dans le thème enfant mais ça n’a rien changé, je suppose que l’autre code avec le padding doit faire conflit.

    De plus, je souhaiterais conserver le padding de 100px pour la version desktop mais juste modifier pour la version mobile donc je ne sais pas si je dois copier coller tel quel ton code ou l’insérer dans une requête média ?

    Merci encore de ton aide précieuse !

    #2155207
    PhiLyon
    Modérateur
    Maître WordPress
    28277 contributions

    Le code est à mettre dans le media queries et si ça ne fonctionne pas, mets le tout dans Apparence/Personnaliser/CSS additionnel

    :-

    #2155333
    sonia75
    Participant
    Padawan WordPress
    70 contributions

    Mille mercis de ton aide, alors après divers essais, ce qui a finalement fonctionné est le code suivant ds le CSS additionnel, si cela peut servir à d’autres 🙂 :

    @media (max-width: 767px) {
            .page #content {padding-left: 0px ;padding-right: 0px}
                    
            }

    J’ai aussi dû corriger des paramètres de mon tableau notamment la largeur réglée à 70%, ce qui expliquait aussi le souci… :-p

    Dis moi je me demandais quelle est la différence entre le fichier CSS principal, le CSS du thème enfant et le CSS additionnel, si jamais tu as le temps de me l’expliquer en qques mots. Disons que je m’étonne qu’un code ne fonctionne pas ds le CSS enfant mais fonctionne ds l’additionnel…

    Encore un grand merci de ton aide. Je passe le sujet en résolu 🙂

    #2155343
    PhiLyon
    Modérateur
    Maître WordPress
    28277 contributions

    Bonjour.

    Le CSS principal (celui du thème parent) on y touche pas.

    Le CSS du thème enfant, c’est là où tu dois insérer tes modifs.

    Le CSS additionnel, parfois selon les thèmes, arrive à surclasser le code du thème parent, si le code se trouve par exemple dans un sous-dossier.

    🙂

     

12 sujets de 1 à 12 (sur un total de 12)
  • Vous devez être connecté pour répondre à ce sujet.