Hola 
Recientemente habilité el Plugin de Anuncios para mi sitio con el objetivo de mostrar anuncios internos.
He agregado los códigos de anuncios internos según las sugerencias encontradas en el tema Plantillas de Anuncios Internos.
Sin embargo, sigue interfiriendo con el resto del CSS de mi tema en la versión móvil/adaptable.
Parece que el contenedor del cuadro de categoría de repente tiene un ancho que se expande más allá del tamaño de la pantalla.
Este es el código CSS que estoy usando:
.banner-ad {
display: flex;
justify-content: center; /* Centra el contenido horizontalmente */
align-items: center; /* Centra el contenido verticalmente dentro del anuncio */
clear: both;
width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2)); /* Ancho explícito para centrar */
max-width: 100%; /* Asegura que no exceda el ancho del contenedor */
box-sizing: border-box;
margin: 15px auto; /* Centra el anuncio y agrega un margen de 15px arriba y abajo */
text-align: center; /* Centra elementos en línea, como la imagen */
img {
display: block;
margin: 0 auto; /* Centra la imagen dentro del anuncio */
max-width: 100%; /* Asegura que la imagen se escale para llenar el ancho del anuncio */
height: auto; /* Mantiene la relación de aspecto */
max-height: 200px; /* Establece una altura máxima para limitar la imagen */
object-fit: contain; /* Asegura que la imagen se escale proporcionalmente */
border-radius: 10px; /* Redondea las esquinas en 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; /* Centra la imagen móvil */
max-width: 80%; /* Asegura que la imagen móvil se escale al ancho del contenedor */
height: auto; /* Mantiene la relación de aspecto */
border-radius: 10px; /* Redondea las esquinas también para la imagen móvil */
}
}
}
¿Alguna sugerencia sobre cómo puedo solucionar esto?