안녕하세요,
최근 제 사이트에서 하우스 광고를 표시하기 위해 Ad 플러그인을 활성화했습니다.
House 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; /* 모바일 이미지도 모서리를 둥글게 */
}
}
}
이 문제를 해결하는 데 도움이 될 조언을 주시면 감사하겠습니다!