Horizon을 전체 폭으로 만드는 것에 대해 의견이 있으신가요? 현재 가운데 부분이 다소 좁게 느껴집니다(코르셋처럼?). 전체 폭으로 확장하면 훨씬 편안해질 것 같습니다.
4개의 좋아요
아니요, 그렇게 할 계획은 없습니다. 최적의 읽기 길이에 해당하는 제한된 폭을 유지하고 있습니다.
2개의 좋아요
방금 테스트해봤습니다(모바일 기준) 제 환경에서는 잘 동작합니다. 콘솔에 어떤 내용이 표시되나요? 아니면 다른 브라우저로 시도해볼 수 있을까요?
1개의 좋아요
감사합니다 @chapoi! 제 콘솔:
1개의 좋아요
네, 재현이 확실합니다. 아마도 Horizon이 core로 이동되었기 때문인 것 같아요. 미리보기 링크를 어떻게 수정해야 할지 알아봐야 할 것 같습니다. (업데이트: OP의 링크는 이제 업데이트되었습니다)
그럼에도 불구하고, 테마를 전환하면 Meta에서 직접 미리보기를 확인할 수 있습니다.
2개의 좋아요
감사합니다, 이제 작동합니다!
1개의 좋아요
2개의 게시물이 새로운 주제로 분리되었습니다: Invisible Button Text on Horizon Theme
모바일 광고 컨테이너 오버플로우 – 하우스 광고 RTL/LTR 레이아웃 불일치
안녕하세요
Horizon 테마와 공식 House Ads 플러그인을 사용 중이며, Discourse 디자인 시스템과 호환되는 CSS 변수와 레이아웃 규칙을 사용하여 광고를 스타일링하는 사용자 정의 컴포넌트를 만들었습니다.
문제: 모바일에서 광고 컨테이너가 뷰포트에서 벗어나는 문제 (LTR 및 RTL 모두 발생)
- 테마: Horizon (기본 테마나 Material等其他 테마에서는 재현되지 않음)
- 플러그인: House Ads + 사용자 정의 컴포넌트
- 기기: 모바일
- 동작:
- **사이트 언어 = 영어 (LTR)**인 경우 →
.ad-container의 왼쪽 가장자리가 잘림 (왼쪽으로 오버플로우). - **사이트 언어 = 페르시아어/아랍어 (RTL)**인 경우 → 오른쪽 가장자리가 잘림 (오른쪽으로 오버플로우).
- **사이트 언어 = 영어 (LTR)**인 경우 →
- 기대되는 동작: 광고 카드가 뷰포트 안에 완전히 포함되어 포스트 콘텐츠 너비에 맞춰 중앙 정렬되거나 정렬되어야 합니다.
제 CSS 코드:
요약
:root {
/* Core colors */
--ad-bg: var(--secondary);
--ad-border: var(--highlight);
--ad-text: var(--primary);
/* Label */
--ad-label-bg: var(--highlight);
--ad-label-text: var(--danger);
}
.house-creative {
margin-left: 0 !important;
}
.house-creative a.between-posts-ad {
display: block;
text-decoration: none;
color: inherit;
background-color: transparent;
font-family: inherit;
}
/* ===============================
Card Container
=============================== */
.house-creative .ad-container {
direction: rtl !important;
text-align: center !important;
margin-bottom: 20px;
padding: 10px 5px;
max-width: calc(#{$topic-avatar-width} + #{$topic-body-width} + (#{$topic-body-width-padding} * 2)); background-color: var(--ad-bg);
border: 2px solid var(--ad-border);
border-radius: 10px;
box-sizing: border-box;
line-height: 1.7;
color: var(--ad-text);
transition:
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease,
transform 0.2s ease;
}
.house-creative a.between-posts-ad:hover .ad-container {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.house-creative .ad-label {
display: inline-block;
text-align: center;
margin-bottom: 6px;
padding: 4px 12px;
font-size: 0.85em;
font-weight: 700;
text-transform: uppercase;
background-color: var(--ad-label-bg);
color: var(--ad-label-text);
border-radius: 999px;
}
.house-creative .ad-container .ad-text {
margin: 0;
font-size: 1rem;
line-height: 1.9;
color: var(--ad-text);
direction: rtl ;
text-align: center !important ;
unicode-bidi: isolate;
}
@media (max-width: 480px) {
.house-creative .ad-container {
direction: rtl !important;
text-align: center !important;
padding: 16px 12px;
width: 100%;
max-width: 100%;
}
}
Horizon은 모든 컴포넌트와 플러그인과 호환되지 않습니다(아직).
2개의 좋아요
이게 적절한 장소인지는 모르겠지만, Meta의 Horizon이 카테고리 뷰에서 각 주제별로 몇 줄씩 미리 보여 주는 방식을 좋아합니다. 제 사이트에서는 이 기능을 재현할 수 없고, 어디서부터 살펴봐야 할지 막막합니다. 감사합니다!!
4개의 좋아요
여기서 이에 대해 읽을 수 있습니다
6개의 좋아요
9개의 게시글이 새 주제로 분리되었습니다: 사용자 이름에서 @ 배치의 RTL 문제
2개의 게시물이 새 주제로 분리되었습니다: Compact/Expanded view not working on Horizon
게시물 2개가 새로운 주제로 분리되었습니다: Horizon interaction with Brand Header
게시물이 새 주제로 분리되었습니다: Flair issues on Horizon
게시물이 새 주제로 분리되었습니다: Two-Level Subcategories Display Issue
이것이 Horizon에 관한 것인지, 아니면 Header Categories Navbar 컴포넌트에 관한 것인지 확실하지 않습니다. Horizon의 메뉴 바는 다른 테마(비교를 위해 Foundation)와 달리 왼쪽 끝에서부터 시작한다는 지적을 받았는데, 넓은 모니터에서 볼 때 이는 좀 이상해 보입니다.
Horizon:
Foundation:
이것이 의도된 동작인가요? 아니면 수정이 필요한 문제인가요? 콘텐츠 폭이 제한되어 있다면, 메뉴 바가 왼쪽 끝까지 확장되는 것은 논리적으로 맞지 않는다고 생각합니다.
여전히 재현할 수 있나요? 현재는 로컬에서 재현할 수 없습니다.