<redacted>
Me pregunto si es posible añadir una escala adaptativa. Me gustaría tener un componente de barra lateral en el lado derecho.
CSS
/* Obtiene el ancho del avatar del usuario y establece el ancho máximo del contenedor de anuncios */
/* Estilos del contenedor de anuncios */
#list-area {
display: flex; /* Organiza los anuncios usando flexbox */
flex-direction: column; /* Muestra los anuncios verticalmente */
gap: 0; /* Elimina el espacio entre las imágenes de los anuncios */
padding: 0; /* Elimina el relleno del contenedor */
margin: 0; /* Asegura que no haya margen adicional alrededor del contenedor de anuncios */
max-width: 812px; /* Limita el ancho del contenedor de anuncios a un máximo de 812px (ancho del avatar: 48px) */
}
/* Estilos del enlace de anuncio */
.banner-ad {
display: block; /* Convierte el contenedor de anuncios en un elemento de bloque */
width: 100%; /* Asegura que el contenedor de anuncios ocupe el 100% del ancho */
max-width: 100%; /* Evita superar el ancho máximo */
margin: 0; /* Elimina el espacio entre los contenedores de anuncios */
}
/* Estilos de la imagen de anuncio responsiva */
.ad-image {
width: 100%; /* Asegura que la imagen ocupe todo el ancho de su elemento padre */
height: auto; /* Mantiene la relación de aspecto original de la imagen */
max-width: 100%; /* Impide que la imagen supere el ancho máximo de su contenedor */
display: block; /* Corrige el problema del espacio vacío en la parte inferior de las imágenes */
margin: 0; /* Elimina cualquier espacio adicional alrededor de la imagen */
}
/* Diseño Responsivo: Ajusta la visualización de anuncios para pantallas grandes y pequeñas */
/* Ajusta la visualización de anuncios en dispositivos con un ancho inferior a 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Asegura que no haya relleno adicional en dispositivos móviles */
}
.banner-ad {
width: 100%; /* Asegura que el anuncio ocupe todo el ancho en pantallas pequeñas */
}
.ad-image {
width: 100%; /* Asegura que la imagen se adapte al ancho del contenedor */
height: auto; /* Mantiene la relación de aspecto de la imagen */
}
}
/* Ajusta aún más las imágenes de anuncios en dispositivos muy pequeños (p. ej., teléfonos en modo vertical) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Asegura que las imágenes se adapten al ancho de la pantalla del teléfono */
max-width: 100%; /* Establece el ancho máximo al 100% para evitar un tamaño excesivo */
height: auto; /* Mantiene la relación de aspecto de la imagen */
}
}
<redacted>