Je me demande s’il est possible d’ajouter une échelle adaptative ? J’aimerais avoir un composant de barre latérale sur le côté droit.
CSS
/* Récupère la largeur de l'avatar de l'utilisateur et définit la largeur maximale du conteneur publicitaire */
/* Styles du conteneur publicitaire */
#list-area {
display: flex; /* Organise les publicités en utilisant flexbox */
flex-direction: column; /* Affiche les publicités verticalement */
gap: 0; /* Supprime l'espacement entre les images publicitaires */
padding: 0; /* Supprime le remplissage du conteneur */
margin: 0; /* Assure qu'il n'y a pas de marge supplémentaire autour du conteneur publicitaire */
max-width: 812px; /* Limite la largeur du conteneur publicitaire à un maximum de 812px (largeur de l'avatar : 48px) */
}
/* Styles des liens publicitaires */
.banner-ad {
display: block; /* Fait du conteneur publicitaire un élément de bloc */
width: 100%; /* Assure que le conteneur publicitaire occupe 100% de la largeur */
max-width: 100%; /* Empêche de dépasser la largeur maximale */
margin: 0; /* Supprime l'espacement entre les conteneurs publicitaires */
}
/* Styles des images publicitaires réactives */
.ad-image {
width: 100%; /* Assure que l'image occupe toute la largeur de son parent */
height: auto; /* Maintient le rapport d'aspect d'origine de l'image */
max-width: 100%; /* Empêche l'image de dépasser la largeur maximale de son conteneur */
display: block; /* Corrige le problème d'espace vide en bas des images */
margin: 0; /* Supprime tout espace supplémentaire autour de l'image */
}
/* Conception réactive : ajuste l'affichage des publicités pour les grands et petits écrans */
/* Ajuste l'affichage des publicités sur les appareils dont la largeur est inférieure à 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Assure qu'il n'y a pas de remplissage supplémentaire sur les appareils mobiles */
}
.banner-ad {
width: 100%; /* Assure que la publicité occupe toute la largeur sur les petits écrans */
}
.ad-image {
width: 100%; /* Assure que l'image s'adapte à la largeur du conteneur */
height: auto; /* Maintient le rapport d'aspect de l'image */
}
}
/* Ajuste davantage les images publicitaires sur les très petits appareils (par exemple, les téléphones en mode portrait) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Assure que les images s'adaptent à la largeur de l'écran du téléphone */
max-width: 100%; /* Définit la largeur maximale à 100% pour éviter une taille excessive */
height: auto; /* Maintient le rapport d'aspect de l'image */
}
}
