# Les annonces pour la maison affectent les dimensions mobiles

**URL:** https://meta.discourse.org/t/house-ads-affecting-mobile-dimensions/336393
**Category:** Support
**Tags:** advertising
**Created:** [Novembre 15, 2024, 7:31 UTC](https://meta.discourse.org/t/house-ads-affecting-mobile-dimensions/336393 "2024-11-15T19:31:02Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Clo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/clo/32/372138_2.png) [@Clo](https://meta.discourse.org/u/Clo)
#### Post date: [Novembre 15, 2024, 7:31 UTC](https://meta.discourse.org/t/house-ads-affecting-mobile-dimensions/336393/1 "2024-11-15T19:31:02Z")

</div>

Salut,

J’ai récemment activé le plugin Ad pour mon site dans le but d’afficher des annonces internes.  
J’ai ajouté les codes d’annonces internes selon les suggestions trouvées dans le sujet [Modèles d’annonces internes](https://meta.discourse.org/t/house-ad-templates/122004).

Cependant, cela perturbe le reste du CSS de mon thème sur la version mobile/responsive.

 ![WhatsApp Image 2024-11-15 at 21.26.44_1e286345](https://global.discourse-cdn.com/meta/original/4X/f/c/2/fc2f3ae1e028649d952b497b343f17c715fbaa56.jpeg)  
 ![WhatsApp Image 2024-11-15 at 21.26.44_812d6234](https://global.discourse-cdn.com/meta/original/4X/a/c/e/ace1685cf9041cdc2497c75a870b0fb9f7645f28.jpeg)

Il semble que le conteneur de la boîte de catégorie ait soudainement une largeur qui dépasse la taille de l’écran.

Voici le code CSS que j’utilise :

```plaintext
.banner-ad {
    display: flex;
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Centre le contenu verticalement dans la publicité */
    clear: both;
    width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2)); /* Largeur explicite pour le centrage */
    max-width: 100%; /* S'assure qu'il ne dépasse pas la largeur du conteneur */
    box-sizing: border-box;
    margin: 15px auto; /* Centre la publicité et ajoute une marge de 15px en haut et en bas */
    text-align: center; /* Centre les éléments en ligne, comme l'image */

    img {
        display: block;
        margin: 0 auto; /* Centre l'image dans la publicité */
        max-width: 100%; /* S'assure que l'image s'adapte pour remplir la largeur de la publicité */
        height: auto; /* Maintient le rapport d'aspect */
        max-height: 200px; /* Définit une hauteur maximale pour contraindre l'image */
        object-fit: contain; /* S'assure que l'image s'adapte proportionnellement */
        border-radius: 10px; /* Arrondit les coins de 10px */

        &.desktop {
            display: block;
        }
        &.mobile {
            display: none;
        }
    }
}

@media only screen and (max-width: 100px) {
    .banner-ad {
        img.desktop, p {
            display: none;
        }
        img.mobile {
            display: block;
            margin: 0 auto; /* Centre l'image mobile */
            max-width: 80%; /* S'assure que l'image mobile s'adapte à la largeur du conteneur */
            height: auto; /* Maintient le rapport d'aspect */
            border-radius: 10px; /* Arrondit également les coins de l'image mobile */
        }
    }
}

```

Toute suggestion pour m’aider à résoudre ce problème serait grandement appréciée !