[Résolu] MODIFIER LA LARGEUR D’UN SEUL CONTENEUR SUR TOUT LE SITE (Créer un compte)

  • WordPress :5.4
  • Statut : résolu
15 sujets de 1 à 15 (sur un total de 16)
  • Auteur
    Messages
  • #2339855
    ouechgro
    Participant
    Padawan WordPress
    55 contributions

    Bonjour,

    Ma configuration WP actuelle :

    • Thème utilisé : Astra
    • Extensions en place : Carousel Slider, Cookie Notice, Custom Fonts, Dynamic To Top, SecuPress Free, Social Warfare, Yoast SEO
    • Nom de l’hébergeur : OVH
    • Adresse du site : http://www.lesepessoseurs.com

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

    Dans Personnaliser>Global>Conteneur j’ai réglé la largeur des conteneurs du site au plus bas (768… d’ailleurs comment fait-on si on veut aller encore plus bas ?), or sur une page j’aimerai que la largeur du conteneur reste celle par défaut.

    Comment doit-on procéder s’il-vous-plaît ?

    Merci d’avance.

    #2339872
    ferman
    Participant
    Maître WordPress
    2795 contributions

    Bonjour,

    C’est vraiment n’importe quoi l’adresse que vous donnez pour votre site. Cela décourage les bonnes volontés.

    Il faut préciser la page à laquelle vous souhaitez que la largeur reste par défaut. Par exemple pour la page “artistes” (id 90), ce serait le code ci-dessous (en changeant la valeur 200px pour la valeur par défaut)

    .page-id-90 .ast-container{width:200px;}

    #2339911
    ouechgro
    Participant
    Padawan WordPress
    55 contributions

    Merci pour votre réponse. Désolé, j’ai bien pris note pour l’adresse du site !

    #2340305
    ouechgro
    Participant
    Padawan WordPress
    55 contributions

    En fait le CSS ne réagit que si je rentre une valeur inférieure à celle que j’ai entré dans Personnaliser>Global>Conteneur (à savoir 768px). Exemple, si je fais comme vous me l’indiquez, et que je définis 500px ça marche, si je rentre 1200px cela va resté bloqué sur 768px.

    La page en question est la suivante 😉 : https://www.lesepeessoeurs.com/collections/les-classiques-de-la-peinture-prennent-chers-en-roneo/

    Merci d’avance.

    #2340354
    ferman
    Participant
    Maître WordPress
    2795 contributions

    Bonjour,

    Il faur définir une largeur max plus grande. Par exemple pour cette page, vous mettez une largeur max = 1200px et vous mettez la largeur à 100% (100% de maximum 1200px = 1200px)  + quelques petites modifs pour que ce soit bon également sur portable.

    .page-id-134 .ast-container{width:100%;
    max-width:1200px;
    }
    #post-134{padding:0%;
    padding-right:2%;
    padding-left:2%;
    }

    Il y aura encore certainement des choses à changer notamment la taille de la police sur portable. Faites une liste (pas trop longue) en indiquant clairement ce que vous souhaitez. Avec copie d’écran c’est encore mieux.

    #2340411
    ouechgro
    Participant
    Padawan WordPress
    55 contributions

    Bonjour,

    merci pour votre réponse. J’ai rajouté :

    #post-134 img{
    padding:4%;
    }

    Pour que les images a un moment donné ne touchent pas le texte de la colonne de droite. Est-ce une bonne solution ?

     

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2340415
    ferman
    Participant
    Maître WordPress
    2795 contributions

    Bonjour,

    Oui, c’est la bonne solution.

    #2340416
    ouechgro
    Participant
    Padawan WordPress
    55 contributions

    Par ailleurs j’aimerai qu’au sein de cette page une image et son texte sur deux soient sur fond noir (une bande noire de l’intégralité de la largeur).

    Mon essai est assez lamentable 🙂

    Merci pour votre aide.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2340418
    ouechgro
    Participant
    Padawan WordPress
    55 contributions

    Merci alors je laisse comme cela pour le padding ! !-)

    #2340421
    ferman
    Participant
    Maître WordPress
    2795 contributions

    Si vous voulez que les articles  impairs aient un fond noir (et le texte blanc) mettez le code suivant et si vous voulez que ce soit les pairs remplacez “odd” par “even” .

    .wp-block-columns:nth-child(odd){background-color:black;
    color:white;}

    #2340426
    ouechgro
    Participant
    Padawan WordPress
    55 contributions

    Wow !

    Merci !

    Juste, est-il possible que cela forme un bandeau noir qui couvre l’intégralité de la largeur de l’écran et pas juste les deux colonnes ?

    #2340432
    ferman
    Participant
    Maître WordPress
    2795 contributions

    Juste, est-il possible que cela forme un bandeau noir qui couvre l’intégralité de la largeur de l’écran et pas juste les deux colonnes ?

    Là, ça commence à devenir  compliqué mais bon on peut y arriver.  C’est un peu bricolé mais je ne vois pas d’autre solution (il y en a peut-être).

    Donc, en plus du code que je vous ai donné avant, vous allez ajouter le code ci dessous. Vous devriez ainsi avoir une bande noire sur toute la largeur de la page sur écran PC + tablette horizontale. Pour tablette verticale et mobiles c’est désactivé car le résultat n’est pas satisfaisant et pour mobile ce n’était de toute façon pas nécessaire. Regardez si ça fonctionne chez vous.

    @media only screen and (min-width: 800px) {
    [id*="post-"] .wp-block-columns:nth-child(odd) {
      box-shadow: 200px 0px black;
    	padding-bottom:0px;
    	}
    [id*="post-"] .wp-block-columns:nth-child(odd) img {
      box-shadow: -200px 9px 0px 9px black;
      }
    }

    • Cette réponse a été modifiée le il y a 4 mois et 2 semaines par ferman.
    • Cette réponse a été modifiée le il y a 4 mois et 2 semaines par ferman.
    • Cette réponse a été modifiée le il y a 4 mois et 2 semaines par ferman.
    #2340474
    ouechgro
    Participant
    Padawan WordPress
    55 contributions

    Bonjour,

    merci pour votre aide.

    Il y a un petit couac si je réduis un peu la fenêtre… cf. la capture d’écran.

    Par ailleurs j’ai essayé de mettre un peu plus d’espace en noir en haut de la bande je n’y arrive pas.

    Merci encore.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2340477
    ferman
    Participant
    Maître WordPress
    2795 contributions

    Bonjour,

    Vous allez remplacer tous les codes que je vous ai donnés par le suivant, beaucoup plus simple:

    [id*="post-"] .wp-block-columns:nth-child(even){background-color:black;
    	box-shadow: 200px 0px 0px 0px black,-200px 0px 0px 0px black ;
    	padding-top:30px;}

    Cela répond aussi à la question de la bande noire.

     

    • Cette réponse a été modifiée le il y a 4 mois et 2 semaines par ferman.
    • Cette réponse a été modifiée le il y a 4 mois et 2 semaines par ferman.
    • Cette réponse a été modifiée le il y a 4 mois et 2 semaines par ferman.
    #2340489
    ouechgro
    Participant
    Padawan WordPress
    55 contributions

    Un grand merci. Cela marche parfaitement.

    Merci Merci !

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