Correctifs sur un site web

1. Contexte et Objectifs

Dans le cadre de mon alternance j'ai dû travailler sur la résolution de problème concernant le site web d'un client édité via WordPress. En effet il se trouve que son menu de navigation ne fonctionnait pas sur mobile.

2. Besoins identifiés

Pour régler ce problème et accéder à la requête du client, j'ai utilisé le menu "inspecter" de Google dans le but de savoir quelle partie du code je devais sélectionner et modifier pour faire fonctionner le menu déroulant sur mobile.

Le client a ensuite émis d'autres requêtes :

Réduction des espaces entre les paragraphes sur mobile.
Empêcher la césure des mots.

3. Solution technique retenue

Une fois la section identifiée, j'ai dû trouver le composant qui bloquait le menu mobile.

Après différentes recherches et documentation sur le thème utilisé sur WordPress, j'ai appliqué ce correctif en CSS :

/* Supprimer le transform du parent pour libérer le menu mobile */
nav.wp-block-navigation {
    transform: none !important;
}

Pour les requêtes suivantes du client, j'ai appliqué la même méthode (recherche puis correctif CSS ciblé) :

/* Réduction des espacements entre les paragraphes sur la page d'accueil */
@media (max-width: 768px) {

  .wp-block-group.is-style-section-3 {
    margin-top: 8px !important;
  }

  .wp-block-column.is-layout-flow {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .wp-block-group.alignwide {
    padding-top: 3px !important;
    padding-bottom: 8px !important;
  }

  .wp-block-group.is-style-section-3 {
    margin-top: 0 !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 8px !important;
  }

}

/* Empêcher la césure des mots */
p {
  hyphens: none !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
}

4. Réalisation

Après application du premier correctif, le menu fonctionne sans problème et la navigation du site sur mobile est de nouveau disponible. J'ai ensuite traité les requêtes complémentaires du client (réduction des espacements entre paragraphes et suppression de la césure des mots) en appliquant la même démarche : identification de la section via l'inspecteur, recherche documentaire sur le thème WordPress, puis application d'un correctif CSS ciblé.

Cette situation professionnelle m'a permis de mettre en œuvre mes compétences et connaissances en programmation, et plus précisément sur les langages CSS et HTML.