<redacted>
Ich frage mich, ob es möglich ist, eine adaptive Skalierung hinzuzufügen. Ich hätte gerne ein Seitenleisten-Element auf der rechten Seite.
CSS
/* Hole die Breite des Avatar-Bildes des Benutzers und setze die maximale Breite des Anzeigencontainers */
/* Stile für den Anzeigencontainer */
#list-area {
display: flex; /* Anzeigen mit Flexbox anordnen */
flex-direction: column; /* Anzeigen vertikal anordnen */
gap: 0; /* Abstand zwischen den Anzeigenbildern entfernen */
padding: 0; /* Innenabstand des Containers entfernen */
margin: 0; /* Sicherstellen, dass kein zusätzlicher Außenabstand um den Anzeigencontainer herum vorhanden ist */
max-width: 812px; /* Breite des Anzeigencontainers auf maximal 812px begrenzen (Avatar-Breite: 48px) */
}
/* Stile für Anzeigenlinks */
.banner-ad {
display: block; /* Anzeigencontainer als Blockelement definieren */
width: 100%; /* Sicherstellen, dass der Anzeigencontainer 100 % der Breite einnimmt */
max-width: 100%; /* Verhindern, dass die maximale Breite überschritten wird */
margin: 0; /* Abstand zwischen den Anzeigencontainern entfernen */
}
/* Stile für responsive Anzeigenbilder */
.ad-image {
width: 100%; /* Sicherstellen, dass das Bild die volle Breite des Elternelements einnimmt */
height: auto; /* Das ursprüngliche Seitenverhältnis des Bildes beibehalten */
max-width: 100%; /* Verhindern, dass das Bild die maximale Breite seines Containers überschreitet */
display: block; /* Das Problem mit dem leeren Raum unter den Bildern beheben */
margin: 0; /* Zusätzlichen Raum um das Bild herum entfernen */
}
/* Responsives Design: Anzeige der Anpassen für große und kleine Bildschirme */
/* Anzeige der Anpassen auf Geräten mit einer Breite von weniger als 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Sicherstellen, dass auf Mobilgeräten kein zusätzlicher Innenabstand vorhanden ist */
}
.banner-ad {
width: 100%; /* Sicherstellen, dass die Anzeige auf kleinen Bildschirmen die volle Breite einnimmt */
}
.ad-image {
width: 100%; /* Sicherstellen, dass sich das Bild an die Containerbreite anpasst */
height: auto; /* Das Seitenverhältnis des Bildes beibehalten */
}
}
/* Anzeigenbilder auf sehr kleinen Geräten (z. B. Handys im Hochformat) weiter anpassen */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Sicherstellen, dass sich die Bilder an die Bildschirmbreite des Handys anpassen */
max-width: 100%; /* Maximale Breite auf 100 % setzen, um eine Übergröße zu vermeiden */
height: auto; /* Das Seitenverhältnis des Bildes beibehalten */
}
}
<redacted>