Ich frage mich, ob es möglich ist, eine adaptive Skalierung hinzuzufügen? Ich hätte gerne eine Seitenleistenkomponente auf der rechten Seite.
CSS
/* Ermittelt die Breite des Benutzeravatars und legt die maximale Breite des Anzeigencontainers fest */
/* Stile des Anzeigencontainers */
#list-area {
display: flex; /* Anzeigen mit Flexbox anordnen */
flex-direction: column; /* Anzeigen vertikal anzeigen */
gap: 0; /* Abstand zwischen den Anzeigenbildern entfernen */
padding: 0; /* Container-Padding entfernen */
margin: 0; /* Sicherstellen, dass kein zusätzlicher Rand um den Anzeigencontainer vorhanden ist */
max-width: 812px; /* Begrenzt die Breite des Anzeigencontainers auf maximal 812 Pixel (Avatarbreite: 48 Pixel) */
}
/* Stile des Anzeigenlinks */
.banner-ad {
display: block; /* Macht den Anzeigencontainer zu einem Blockelement */
width: 100%; /* Stellt sicher, dass der Anzeigencontainer 100 % der Breite einnimmt */
max-width: 100%; /* Verhindert, dass die maximale Breite überschritten wird */
margin: 0; /* Entfernt Abstände zwischen den Anzeigencontainern */
}
/* Stile responsiver Anzeigenbilder */
.ad-image {
width: 100%; /* Stellt sicher, dass das Bild die volle Breite seines übergeordneten Elements einnimmt */
height: auto; /* Behält das ursprüngliche Seitenverhältnis des Bildes bei */
max-width: 100%; /* Verhindert, dass das Bild die maximale Breite seines Containers überschreitet */
display: block; /* Behebt das Problem mit leerem Platz unter den Bildern */
margin: 0; /* Entfernt zusätzlichen Platz um das Bild */
}
/* Responsives Design: Passt die Anzeigenanzeige für große und kleine Bildschirme an */
/* Passt die Anzeigenanzeige auf Geräten mit einer Breite von weniger als 768 Pixel an */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Stellt sicher, dass auf Mobilgeräten kein zusätzliches Padding vorhanden ist */
}
.banner-ad {
width: 100%; /* Stellt sicher, dass die Anzeige auf kleinen Bildschirmen die volle Breite einnimmt */
}
.ad-image {
width: 100%; /* Stellt sicher, dass sich das Bild an die Containerbreite anpasst */
height: auto; /* Behält das Seitenverhältnis des Bildes bei */
}
}
/* Passt Anzeigenbilder auf sehr kleinen Geräten weiter an (z. B. Telefone im Hochformat) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Stellt sicher, dass sich Bilder an die Bildschirmbreite des Telefons anpassen */
max-width: 100%; /* Setzt die maximale Breite auf 100 %, um eine Übergröße zu vermeiden */
height: auto; /* Behält das Seitenverhältnis des Bildes bei */
}
}
