# Horizon 테마에서 중간 크기 뷰포트에서 헤더가 깨집니다
**URL:** https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484
**Category:** Support
**Tags:** horizon-theme
**Created:** [5월 21, 2026, 12:38오전 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484 "2026-05-21T00:38:12Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [5월 21, 2026, 12:38오전 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/1 "2026-05-21T00:38:12Z")
호라이즌(Horizon)의 헤더는 모바일과 데스크톱 모두에서 대부분의 시간 동안 매우 잘 작동합니다:
하지만 저는 비정상적인 화면 비율을 가진 폴더블 폰을 사용하는데, 불행히도 검색창과 아바타가 사라지고 모든 것이 약간 어긋납니다:
이것은 640~767px 폭에서 발생하는 것 같은데, 안타깝게도 제 폴더블 폰이 정확히 그 범위에 해당합니다!
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [5월 21, 2026, 2:25오전 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/2 "2026-05-21T02:25:48Z")
저도 이 문제를 재현할 수 있습니다. 문제는 접이식 스마트폰/소형 태블릿 뷰포트 크기 `@media (min-width 640px) (max-width: 767px)`에서 헤더 안의 contents 클래스가 grid로 표시되는 것 같습니다:
해당 너비 범위에서 properties를 contents로 변경하면 패치할 수 있습니다:
```css
@media (min-width: 640px) and (max-width: 767.98px) {
.d-header>.wrap .contents {
display: contents!important;
}
}
```
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [5월 21, 2026, 2:55오전 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/3 "2026-05-21T02:55:30Z")
하지만 저는 그 설정이 오히려 더 나쁘게 만든다고 느낍니다!! 해당 설정을 꺼두면, 모바일 기기로 지정되지 않는 한 767px 이하의 모든 크기에서 헤더가 깨져 보입니다.
하지만 적어도 접이식 스마트폰에서는 문제가 없습니다. 다만 화면이 작아질 때 데스크톱 브라우저에서는 여전히 문제가 있네요.
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [7월 17, 2026, 3:05오전 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/4 "2026-07-17T03:05:01Z")
> [@Lilly](#):
>
> 수정: 이 설정을 비활성화하면 제 경우 문제가 해결되는 것 같습니다 (여전히 남아있었는지 잊고 있었습니다):
>
> 
이 설정은 이제 사라진 것 같아서 더 이상 우회 방법이 없습니다.
Horizon에서는 여전히 문제가 남아 있습니다.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [7월 24, 2026, 7:32오전 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/5 "2026-07-24T07:32:25Z")
> [@nathank](#):
>
> 하지만 그 설정을 적용하면 오히려 상황이 더 나빠지는 것 같아요!! 설정을 끄면, 기기를 모바일로 지정하지 않는 한 767px 이하의 모든 크기에서 헤더가 깨져 보입니다.
> [@nathank](#):
>
> Horizon에서는 여전히 문제가 남아 있습니다.
지금 데스크톱 시뮬레이션을 통해 재현해 보고 있는데(폴더블 폰이 없어서), 특별히 이상한 점을 발견하지 못하겠습니다. 이 문제를 진단하는 데 도움을 주실 수 있나요?
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [7월 24, 2026, 8:11오전 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/6 "2026-07-24T08:11:47Z")
데스크톱에서 브라우저 창을 단순히 좁히면 재현할 수 있습니다:
#### 충분히 넓을 때:
#### 조금 더 좁히면 몇 가지 이상한 현상(사이드바/헤더가 하얗게 변함)이 발생하는데, 이것이 의도적인 것인지 확실하지 않습니다:
#### 더 좁히면 문제가 더 명확해집니다(즉, 접이식 스마트폰 크기):
#### 매우 좁을 때(일반 스마트폰 크기)는 다시 정상입니다.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [7월 24, 2026, 8:15오전 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/7 "2026-07-24T08:15:30Z")
> [@nathank](#):
>
> 조금 더 좁게 만들면 몇 가지 이상한 현상(사이드바/헤더가 흰색으로 변함)이 발생하는데, 이게 의도적인 건지 확신이 서지 않습니다:
의도된 것입니다.
> [@nathank](#):
>
> 더 좁게 하면 문제가 드러납니다(즉, 접이식 폰 크기).
솔직히 이 부분을 이해하지 못하겠습니다. 이건 644px 상태입니다:
어떤 폭에서도 제 환경에서는 아바타가 사라지지 않습니다.
이곳에서(Meta에서, Horizon을 사용하여) 재현해 볼 수 있을까요?
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [7월 24, 2026, 8:19오전 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/8 "2026-07-24T08:19:06Z")
아, 재현 관련해서 그렇게 할 수 있다는 걸 깜빡했네요! 아니, 저한테는 메타에서 호라이즌으로도 재현이 안 돼요.
아마 제 사이트 쪽에 문제가 있는 것 같네요. 제 쪽에서 문제를 조사해 보고 결과를 알려드릴게요. 확인해 주셔서 감사합니다!!!
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [7월 24, 2026, 8:26오전 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/10 "2026-07-24T08:26:29Z")
와, 문제를 찾는 게 놀라울 정도로 쉬웠네요.
이 테마 구성요소는 Horizon과 호환되지 않아요:
> [@모바일 왼쪽 햄버거 메뉴](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513):
>
> One thing we never got around to and caused some confusion after our work on [Full height, slide out hamburger menu](https://meta.discourse.org/t/full-height-slide-out-hamburger-menu/29789) was that the hamburger menu, on the right side, opens a menu from the left side. For those interested in rearranging the header, this is for you: Mobile menus appearing in the upper-left corner of the screen is not very reachable single-handedly which is why this is a standalone theme component. Options, yanno? hammer_and_wrench…
그리고 TC를 정말 좋아해요!! 모바일에서 메뉴가 오른쪽으로 넘어가는 걸 참을 수가 없거든요. 이런 사소한 것들이 우리를 미치게 만들죠 (물론 우리 중 일부는요), 그렇죠? 아마도 저는 왼손잡이여서 거기가 더 편한 걸지도 몰라요.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [7월 24, 2026, 8:28오전 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/11 "2026-07-24T08:28:54Z")
네, 알겠습니다.
원본 [Horizon Theme](https://meta.discourse.org/t/horizon-theme/360486) 주제에서 이렇게 말씀드린 바 있습니다:
> [@Discourse](#):
>
> ### 부분적 호환성
>
> _이 기능과의 호환성이 중요하시다면 알려주세요. 테마 컴포넌트/플러그인 또는 Horizon의 개선 우선순위를 설정하는 데 도움이 됩니다._
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [7월 24, 2026, 1:26오후 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/12 "2026-07-24T13:26:07Z")
저도 그 컴포넌트를 사용 중입니다. 사이드바 아이콘에 대해서는 같은 생각을 가지고 있지만, 호라이즌은 좋아하지도 않고 사용하지는 않아요. 해당 컴포넌트에 대한 작업을 해본 적이 있어서, 내던에게 수정 방법을 찾아보겠습니다.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [7월 24, 2026, 3:10오후 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/13 "2026-07-24T15:10:51Z")
네이선, 안녕하세요! 여기서 수정 사항을 찾았어요:
> [@모바일 왼쪽 햄버거 메뉴](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/50?u=lilly):
>
> 안녕하세요 @featheredtoast. 접이식 폰과 일부 태블릿의 뷰포트 크기에서 Horizon 테마의 헤더 문제를 수정하기 위해 PR을 올렸습니다. 확인해 주시고 머지해 주시면 감사하겠습니다:
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [7월 25, 2026, 10:03오전 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/14 "2026-07-25T10:03:49Z")
릴리, 진짜 최고야! 접이식 폰으로 왼쪽은 햄버거, 오른쪽은 호라이즌을 동시에 즐기고 있어.
정말 대단해!!!
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [8월 24, 2026, 10:04오전 UTC](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/15 "2026-08-24T10:04:14Z")
이 주제는 마지막 답변 후 30일이 지나면 자동으로 닫힙니다. 더 이상 새로운 답변을 남길 수 없습니다.