Correctif bannière d’en-tête responsive — les-baladins.ch

Date : 8 juillet 2026 Site : les-baladins.ch (WordPress, GeneratePress + GenerateBlocks, thème enfant generatepress_child)

Problème initial

Sur mobile, l’image de fond du header (top6-1.png) apparaissait partiellement coupée derrière le logo. Le rendu était correct sur desktop et tablette.

Diagnostic

L’image de fond n’est définie ni dans un élément GeneratePress Hooks (“TOP HOOK”, “TOP en-tête” — tous deux vides), ni dans un bloc Gutenberg, mais dans Personnaliser > CSS additionnel :

.inside-header {
    background-image: url(http://les-baladins.ch/wp-content/uploads/top6-1.png);
    min-height: 200px;
}

Faits établis : – top6-1.png fait 1020 × 200 px (ratio 5,1:1), soit exactement la largeur max de .grid-container (1020px). – Aucun background-size / background-position / background-repeat n’était défini → l’image s’affichait à sa taille native, ancrée en haut-gauche. – Sur desktop (≥1020px de large), la boîte fait pile la taille de l’image : rendu correct. – En dessous de 1020px (tablette, mobile), la boîte restait fixée à 200px de haut mais devenait plus étroite que l’image (1020px) : seule la tranche gauche de l’image restait visible, le reste coupé.

Un second problème est apparu en cours de correction : sur mobile, le logo se retrouvait centré au lieu de rester à gauche. Cause identifiée dans le CSS du thème (generatepress/assets/css/main.min.css) :

.inside-header { display:flex; align-items:center; }              /* actif à toutes les tailles */
@media (max-width:768px) {
  .inside-header { flex-direction:column; text-align:center; }    /* actif seulement <768px */
}

En layout row (desktop/tablette), align-items:center centre verticalement (axe transversal) et justify-content contrôle l’horizontal. En dessous de 768px, le thème bascule .inside-header en flex-direction:column : les axes pivotent, align-items:center (toujours actif, sans condition) prend alors le contrôle de l’axe horizontal et centre le logo, tandis que justify-content:flex-start n’a plus d’effet horizontal à cette taille.

Correctif appliqué

CSS additionnel actuellement en place (remplace l’ancien bloc) :

.inside-header {
    background-image: url(https://les-baladins.ch/wp-content/uploads/top6-1.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1020 / 200;
    height: auto;
    min-height: 0;
    justify-content: flex-start;
}

#logo img {
    height: clamp(40px, 12.35vw, 126px);
    width: auto;
}

@media (max-width: 768px) {
    .inside-header {
        align-items: flex-start;
        text-align: left;
    }
}

Ce que fait chaque partie :

• aspect-ratio: 1020 / 200 + height: auto + min-height: 0 : la hauteur de .inside-header vaut toujours largeur/5,1, donc exactement les proportions de l’image, à toute largeur d’écran. background-size: cover n’a alors jamais besoin de rogner puisque la boîte a déjà le bon ratio → bannière entièrement visible sur desktop, tablette et mobile. Le rendu desktop (≥1020px) est inchangé (200px de haut, comme avant).
• #logo img { height: clamp(40px, 12.35vw, 126px); width: auto; } : le logo (364×126px natif) rétrécit proportionnellement à la bannière au lieu de rester figé à sa taille native, ce qui évite qu’il déborde d’une bande devenue plus fine sur petit écran. 126/1020 = 12,35 %, donc la même logique d’échelle que la bannière ; le clamp() plafonne entre 40px (lisibilité minimale) et 126px (taille d’origine, jamais dépassée).
• justify-content: flex-start : verrouille l’alignement du logo à gauche en layout row (desktop/tablette), indépendamment du réglage “Alignement de l’en-tête” du Customizer.
• Media query max-width: 768px : neutralise spécifiquement align-items:center et text-align:center forcés par le thème à ce breakpoint, pour que le logo reste à gauche même quand .inside-header passe en colonne sur mobile.

Point de vigilance signalé mais non résolu par ce correctif : sur des très petits mobiles (<460px environ), la bande de bannière devient fine et il n’est pas exclu que le logo déborde légèrement sur le fond rouge uni — pas de coupure, juste un débordement visuel possible. À surveiller si le rendu sur très petit écran doit être vérifié précisément.

Accès technique mis en place

Le CSS additionnel du Customizer n’est pas exposé par l’API REST de WordPress par défaut (le post type custom_css n’a pas show_in_rest). Un mu-plugin a été créé pour permettre un accès en lecture/écriture :

Fichier : les-baladins-custom-css-api.php, déposé dans wp-content/mu-plugins/.

Endpoints (authentification par mot de passe d’application, compte avec la capacité edit_theme_options) :

• GET /wp-json/les-baladins/v1/custom-css → { "css": "...contenu actuel..." }
• POST /wp-json/les-baladins/v1/custom-css avec { "css": "..." } → écrit le nouveau contenu

Cet accès reste actif pour les futures interventions sur le CSS additionnel du site, sans copier-coller manuel.

Vérification

Le CSS additionnel live a été relu via cet endpoint le 8 juillet 2026 et correspond exactement au bloc ci-dessus — le correctif est bien en production.