환영 링크 배너에 여분 마진이 있습니다

기여 UX
,
1

작은 여백 버그가 있습니다:

image
image719×111 1.36 KB

메타 사이트에서는 이 문제를 볼 수 없지만, 제 인스턴스에서는 다음 CSS 코드 때문에 발생합니다:

image

이 코드는 상단 버튼과 환영 배너 사이에 여백을 추가하기 위해 존재하지만, 여백이 적용되면 안 되는 곳에도 강제 적용되고 있습니다. 또한, 스태프나 신뢰 수준 때문에 환영 배너가 숨겨져 있는 경우에도 여백이 계속 활성화되어 있습니다.

수정: 대충 고친 건가요?
이 클래스에서 여백을 제거하세요:

.above-main-container-outlet.welcome-link-banner-connectors {
    margin-bottom: 0em !important;
}

그리고 같은 여백을 이 클래스에 추가하세요:

.above-main-container-outlet.welcome-link-banner-connectors .welcome-link-banner, .below-site-header-outlet.welcome-link-banner-connector .welcome-link-banner {
    margin-bottom: 1em;
}

이렇게 하면 제 경우 문제가 해결되었습니다. 아직까지 깨진 부분은 보이지 않고, 배너도 여전히 잘 보입니다.

3개의 좋아요
2

.above-main-container-outlet.welcome-link-banner-connectors에는 margin-bottom: 1em이 설정되어 있는데, 그 목적을 모르겠습니다.

게다가 웰컴 배너가 표시되든 안 되든 빈 공간이 추가됩니다. 배너가 표시되지 않는다면 마진도 존재하지 않아야 합니다.

image
image2498×1369 261 KB

아래의 다른 테마 컴포넌트 레이아웃에도 영향을 줄 수 있습니다. 예를 들어 Christmas Decoration Component 🎄 의 라이트 로프(Light Rope) 컴포넌트 같은 경우입니다.

예시:

해결 방법은 두 가지입니다:

  1. 웰컴 배너 컴포넌트에서 margin-bottom을 제거하거나(사용 목적이 없다면)
  2. 표시 조건이 충족되지 않을 때 웰컴 배너에 display: none;을 적용합니다.
4개의 좋아요
3

알려주셔서 감사합니다! 배너가 다른 배너나 알림 바로 위에 오는 경우가 있어서 마진이 필요합니다. 컴포넌트가 숨겨졌을 때의 영향을 없애기 위해 마진 위치를 변경할 수 있었습니다.

6개의 좋아요
4

글쎄요, 그러면 세 번째 해결책이네요! :laughing:

4개의 좋아요