Mi chiedo se sia possibile aggiungere una scala adattiva? Vorrei avere un componente a barra laterale sul lato destro.
CSS
/* Ottieni la larghezza dell'avatar dell'utente e imposta la larghezza massima del contenitore dell'annuncio */
/* Stili del contenitore dell'annuncio */
#list-area {
display: flex; /* Disponi gli annunci usando flexbox */
flex-direction: column; /* Visualizza gli annunci verticalmente */
gap: 0; /* Rimuovi lo spazio tra le immagini degli annunci */
padding: 0; /* Rimuovi il padding del contenitore */
margin: 0; /* Assicurati che non ci siano margini extra attorno al contenitore dell'annuncio */
max-width: 812px; /* Limita la larghezza del contenitore dell'annuncio a un massimo di 812px (larghezza avatar: 48px) */
}
/* Stili del link dell'annuncio */
.banner-ad {
display: block; /* Rendi il contenitore dell'annuncio un elemento block */
width: 100%; /* Assicurati che il contenitore dell'annuncio occupi il 100% della larghezza */
max-width: 100%; /* Impedisci il superamento della larghezza massima */
margin: 0; /* Rimuovi lo spazio tra i contenitori degli annunci */
}
/* Stili dell'immagine dell'annuncio reattiva */
.ad-image {
width: 100%; /* Assicurati che l'immagine occupi l'intera larghezza del suo genitore */
height: auto; /* Mantieni le proporzioni originali dell'immagine */
max-width: 100%; /* Impedisci all'immagine di superare la larghezza massima del suo contenitore */
display: block; /* Risolvi il problema dello spazio vuoto sotto le immagini */
margin: 0; /* Rimuovi qualsiasi spazio aggiuntivo attorno all'immagine */
}
/* Design reattivo: regola la visualizzazione degli annunci per schermi grandi e piccoli */
/* Regola la visualizzazione degli annunci su dispositivi con larghezza inferiore a 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Assicurati che non ci sia padding extra sui dispositivi mobili */
}
.banner-ad {
width: 100%; /* Assicurati che l'annuncio occupi l'intera larghezza sugli schermi piccoli */
}
.ad-image {
width: 100%; /* Assicurati che l'immagine si adatti alla larghezza del contenitore */
height: auto; /* Mantieni le proporzioni dell'immagine */
}
}
/* Regola ulteriormente le immagini degli annunci su dispositivi molto piccoli (ad es. telefoni in modalità verticale) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Assicurati che le immagini si adattino alla larghezza dello schermo del telefono */
max-width: 100%; /* Imposta la larghezza massima al 100% per evitare un ingrandimento eccessivo */
height: auto; /* Mantieni le proporzioni dell'immagine */
}
}
