# 하우스 애드가 모바일 화면 크기에 영향을 줍니다

**URL:** <https://meta.discourse.org/t/house-ads-affecting-mobile-dimensions/336393>\
**Category:** Product Support\
**Tags:** advertising\
**Created:** [11월 15, 2024, 7:31오후 UTC](https://meta.discourse.org/t/house-ads-affecting-mobile-dimensions/336393 "2024-11-15T19:31:02Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Clo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/clo/32/372138_2.png) [@Clo](https://meta.discourse.org/u/Clo)\
**Post date:** [11월 15, 2024, 7:31오후 UTC](https://meta.discourse.org/t/house-ads-affecting-mobile-dimensions/336393/1 "2024-11-15T19:31:02Z")

</div>

안녕하세요,

최근 제 사이트에서 하우스 광고를 표시하기 위해 Ad 플러그인을 활성화했습니다.  
[House Ad Templates](https://meta.discourse.org/t/house-ad-templates/122004) 토픽에서 제안된 방법에 따라 하우스 광고 코드를 추가했습니다.

그러나 모바일/반응형 버전에서 테마의 나머지 CSS와 충돌이 일어나고 있습니다.

 ![WhatsApp Image 2024-11-15 at 21.26.44_1e286345](https://global.discourse-cdn.com/meta/original/4X/f/c/2/fc2f3ae1e028649d952b497b343f17c715fbaa56.jpeg)  
 ![WhatsApp Image 2024-11-15 at 21.26.44_812d6234](https://global.discourse-cdn.com/meta/original/4X/a/c/e/ace1685cf9041cdc2497c75a870b0fb9f7645f28.jpeg)

카테고리 박스의 컨테이너가 갑자기 화면 너비를 넘어 확장되는 것처럼 보입니다.

다음은 제가 사용하고 있는 CSS 코드입니다:

```plaintext
.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; /* 모바일 이미지도 모서리를 둥글게 */
        }
    }
}

```

이 문제를 해결하는 데 도움이 될 조언을 주시면 감사하겠습니다!

---

_[View the full topic](https://meta.discourse.org/t/house-ads-affecting-mobile-dimensions/336393)._