Me pregunto si es posible agregar 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 del anuncio */
/* Estilos del contenedor del anuncio */
#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 del anuncio */
max-width: 812px; /* Limita el ancho del contenedor del anuncio a un máximo de 812px (ancho del avatar: 48px) */
}
/* Estilos del enlace del anuncio */
.banner-ad {
display: block; /* Hace que el contenedor del anuncio sea un elemento de bloque */
width: 100%; /* Asegura que el contenedor del anuncio ocupe el 100% del ancho */
max-width: 100%; /* Evita que supere el ancho máximo */
margin: 0; /* Elimina el espacio entre los contenedores de anuncios */
}
/* Estilos de la imagen del anuncio adaptable */
.ad-image {
width: 100%; /* Asegura que la imagen ocupe el ancho completo de su contenedor */
height: auto; /* Mantiene la relación de aspecto original de la imagen */
max-width: 100%; /* Evita que la imagen supere el ancho máximo de su contenedor */
display: block; /* Corrige el problema del espacio vacío debajo de las imágenes */
margin: 0; /* Elimina cualquier espacio adicional alrededor de la imagen */
}
/* Diseño adaptable: ajusta la visualización del anuncio para pantallas grandes y pequeñas */
/* Ajusta la visualización del anuncio 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 el ancho completo 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 los anuncios en dispositivos muy pequeños (por ejemplo, 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 */
}
}
