Olá 
Recentemente ativei o Plugin de Anúncios no meu site com o objetivo de exibir anúncios internos.
Adicionei os códigos de anúncios internos de acordo com as sugestões encontradas no tópico Modelos de Anúncios Internos.
No entanto, ele continua a interferir com o restante do CSS do meu tema na versão móvel/responsiva.
Parece que o contêiner da caixa de categoria de repente tem uma largura que se expande além do tamanho da tela.
Este é o código CSS que estou usando:
.banner-ad {
display: flex;
justify-content: center; /* Centraliza o conteúdo horizontalmente */
align-items: center; /* Centraliza o conteúdo verticalmente dentro do anúncio */
clear: both;
width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2)); /* Largura explícita para centralização */
max-width: 100%; /* Garante que não exceda a largura do contêiner */
box-sizing: border-box;
margin: 15px auto; /* Centraliza o anúncio e adiciona 15px de margem acima e abaixo */
text-align: center; /* Centraliza elementos inline, como a imagem */
img {
display: block;
margin: 0 auto; /* Centraliza a imagem dentro do anúncio */
max-width: 100%; /* Garante que a imagem seja dimensionada para preencher a largura do anúncio */
height: auto; /* Mantém a proporção */
max-height: 200px; /* Define uma altura máxima para restringir a imagem */
object-fit: contain; /* Garante que a imagem seja dimensionada proporcionalmente */
border-radius: 10px; /* Arredonda os cantos em 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; /* Centraliza a imagem móvel */
max-width: 80%; /* Garante que a imagem móvel seja dimensionada para a largura do contêiner */
height: auto; /* Mantém a proporção */
border-radius: 10px; /* Arredonda os cantos também para a imagem móvel */
}
}
}
Alguma sugestão de como posso consertar isso?