Hi,
I recently enabled the Ad Plugin for my site with the aim of showing house ads.
I’ve added the house ad codes according to the suggestions found in the House Ad Templates topic.
However, it keeps messing up with the rest of my theme’s CSS on the mobile/responsive version.
It looks like the container of the category box suddenly has a width expanding past the size of the screen.
This is the CSS code I’m using:
.banner-ad {
display: flex;
justify-content: center; /* Centers content horizontally */
align-items: center; /* Centers content vertically within the advert */
clear: both;
width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2)); /* Explicit width for centering */
max-width: 100%; /* Ensures it doesn't exceed container width */
box-sizing: border-box;
margin: 15px auto; /* Centers the advert and adds 15px margin above and below */
text-align: center; /* Centers inline elements, like the image */
img {
display: block;
margin: 0 auto; /* Centers the image within the advert */
max-width: 100%; /* Ensures image scales to fill advert width */
height: auto; /* Maintains aspect ratio */
max-height: 200px; /* Sets a maximum height to constrain the image */
object-fit: contain; /* Ensures the image scales proportionally */
border-radius: 10px; /* Rounds the corners by 10px */
&.desktop {
display: block;
}
&.mobile {
display: none;
}
}
}
@media only screen and (max-width: 100px) {
.banner-ad {
img.desktop, p {
display: none;
}
img.mobile {
display: block;
margin: 0 auto; /* Centers the mobile image */
max-width: 80%; /* Ensures mobile image scales to container width */
height: auto; /* Maintains aspect ratio */
border-radius: 10px; /* Rounds the corners for mobile image too */
}
}
}
Any suggestions to help my fix this would be greatly appreciated!