정말 훌륭한 플러그인입니다!
한 가지 여쭤볼 것이 있는데요, 카테고리 페이지에서만 하우스 광고를 숨기는 방법이 있을까요? 아니면 카테고리 박스 하단에 광고만 표시되도록 할 수도 있을까요?
안녕하세요 
최근 제 사이트에서 하우스 광고를 표시하기 위해 Ad 플러그인을 활성화했습니다.
Haus Ad Templates 토픽에서 제안된 대로 하우스 광고 코드를 추가했습니다.
하지만 모바일/반응형 버전에서 테마의 나머지 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; /* 모바일 이미지도 모서리를 둥글게 처리 */
}
}
}
이 문제를 해결하는 방법에 대한 조언을 구합니다.