I wonder if it’s possible to add an adaptive scale? I’d like to have a sidebar component on the right side.
CSS
/* Get the user's avatar width and set the maximum width of the ad container */
/* Ad container styles */
#list-area {
display: flex; /* Arrange ads using flexbox */
flex-direction: column; /* Display ads vertically */
gap: 0; /* Remove spacing between ad images */
padding: 0; /* Remove container padding */
margin: 0; /* Ensure no extra margin around the ad container */
max-width: 812px; /* Limit the ad container width to a maximum of 812px (avatar width: 48px) */
}
/* Ad link styles */
.banner-ad {
display: block; /* Make the ad container a block element */
width: 100%; /* Ensure the ad container occupies 100% width */
max-width: 100%; /* Prevent exceeding the maximum width */
margin: 0; /* Remove spacing between ad containers */
}
/* Responsive ad image styles */
.ad-image {
width: 100%; /* Ensure the image occupies the full width of its parent */
height: auto; /* Maintain the original aspect ratio of the image */
max-width: 100%; /* Prevent the image from exceeding its container's max width */
display: block; /* Fix the empty space issue at the bottom of images */
margin: 0; /* Remove any additional space around the image */
}
/* Responsive Design: Adjust ad display for large and small screens */
/* Adjust ad display on devices with a width less than 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Ensure no extra padding on mobile devices */
}
.banner-ad {
width: 100%; /* Ensure the ad occupies the full width on small screens */
}
.ad-image {
width: 100%; /* Ensure the image adapts to the container width */
height: auto; /* Maintain the image's aspect ratio */
}
}
/* Further adjust ad images on very small devices (e.g., phones in portrait mode) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Ensure images adapt to the phone's screen width */
max-width: 100%; /* Set the maximum width to 100% to avoid oversizing */
height: auto; /* Maintain the image's aspect ratio */
}
}
