Здравствуйте,
Недавно я включил плагин «Реклама» для своего сайта с целью показа собственной рекламы.
Я добавил коды собственной рекламы в соответствии с рекомендациями из темы Шаблоны собственной рекламы.
Однако это продолжает нарушать работу остального CSS моего шаблона в мобильной/адаптивной версии.
Похоже, что контейнер блока категории внезапно расширяется за пределы ширины экрана.
Вот используемый мной CSS-код:
.banner-ad {
display: flex;
justify-content: center; /* Центрирует контент по горизонтали */
align-items: center; /* Центрирует контент по вертикали внутри объявления */
clear: both;
width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2)); /* Явная ширина для центрирования */
max-width: 100%; /* Гарантирует, что он не превышает ширину контейнера */
box-sizing: border-box;
margin: 15px auto; /* Центрирует объявление и добавляет отступ 15px сверху и снизу */
text-align: center; /* Центрирует строчные элементы, например изображение */
img {
display: block;
margin: 0 auto; /* Центрирует изображение внутри объявления */
max-width: 100%; /* Гарантирует, что изображение масштабируется под ширину объявления */
height: auto; /* Сохраняет пропорции */
max-height: 200px; /* Устанавливает максимальную высоту для ограничения изображения */
object-fit: contain; /* Гарантирует пропорциональное масштабирование изображения */
border-radius: 10px; /* Закругляет углы на 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; /* Центрирует мобильное изображение */
max-width: 80%; /* Гарантирует, что мобильное изображение масштабируется под ширину контейнера */
height: auto; /* Сохраняет пропорции */
border-radius: 10px; /* Закругляет углы и для мобильного изображения */
}
}
}
Любые предложения по исправлению этой проблемы будут очень кстати!