데스크톱 <> 모바일 보기에서 로고와 헤더 높이를 늘리는 CSS

PC 데스크톱에서 Firefox의 인스펙터를 통해 확인한 결과, 로고 높이를 조작하는 CSS 태그는 다음과 같습니다:

.d-header .title {
  --d-logo-height: 4em;
}

하지만 이 CSS 태그를 데스크톱의 기본 테마 CSS 편집기에 입력해도 PC 데스크톱이나 모바일 폰에서 로고 높이에 아무런 변화가 없습니다.
반면, 동일한 CSS 코드를 모바일 섹션에 입력하면 PC 데스크톱은 물론 모바일 폰에서도 로고 높이가 변경됩니다.
이것은 Discourse의 버그인가요, 아니면 제가 놓치고 있는 것이 있을까요?

안녕하세요,

혹시 모르니 이 CSS를 어디에 넣었나요?

도움 요청을 좀 더 잘 정리해서 전달하는 것이 항상 좋은 습관입니다. 여기에는 도움을 주고 싶어 하는 분들이 정말 많지만, 해결 방법이 다양하기 때문에 빠른 도움을 받으려면 명확한 설명이 필수적입니다 :slight_smile:

또한, 로컬에서 테스트를 진행 중이라면 URL 뒤에 ?mobile_view=1을 붙이는 것을 잊지 마세요.

PC 데스크톱에서 Firefox 인스펙터를 통해 확인한 결과, 로고 높이를 조작하는 CSS 태그는 다음과 같습니다:

.d-header .title {
  --d-logo-height: 4em;
}

그러나 이 CSS 태그를 데스크톱의 기본 테마 CSS 편집기에 입력해도 PC 데스크톱에서 보는 로고 높이도, 모바일 폰에서 보는 로고 높이도 변하지 않습니다.
반면, 동일한 CSS 코드를 모바일 섹션에 입력하면 로고 높이가 모바일 폰뿐만 아니라 PC 데스크톱에서도 변경됩니다. 이것이 Discourse의 버그인 건지, 아니면 제가 놓치고 있는 부분이 있는지 궁금합니다.

질문자님의 의도를 재현해 보려 했지만, 해당 문제를 재현할 수 없습니다:

모바일은 올바르게 변경되고, 데스크톱에는 영향을 주지 않습니다.

에디터에 이 CSS를 추가하면 데스크톱에서는 예상대로 작동합니다:

모바일의 경우, 헤더가 아니라 로고의 높이만 설정하면 됩니다:

도움이 되기를 바랍니다.

감사합니다. 다른 컴퓨터로 넘어갔는데, 여기는 ubuntu 22.04(웹 서버)를 실행 중입니다. 데스크톱 CSS 버킷에 있는 CSS 코드가 올바르게 렌더링되었으니, 아마도 Windows 7이 설치된 다른 PC 데스크톱에서 브라우저 문제가 있는 것 같습니다.
모바일 CSS 버킷에서 3em을 넘어서면 로고 높이가 증가하지 않는 것 같다는 점도 확인했습니다.

.d-header #site-logo {
  height: 3em;
}

3em을 초과하는 값을 시도해도 캐시를 새로고침한 후에도 제 휴대폰(GS23)에서 로고 높이가 커지지 않습니다.

의견 주실 수 있을까요?

네, 로고의 max-width를 해제해 보세요. 그러면 어떤 제약에서도 자유롭게 됩니다.

피드백 감사합니다. 설정에서 해당 옵션을 찾을 수 없는데, CSS를 통해 처리되는 건가요, 아니면 Rails에서 커맨드 라인으로 입력해야 하나요? 후자라면 어떤 형태로 입력해야 하나요?

CSS를 이렇게 사용해야 합니다:

.d-header #site-logo {
  max-width: unset;
}

이 방법으로 안 되면 !important를 추가하세요.

도움 주셔서 감사합니다:

저 뒤에 오시는 분들 중 데스크톱과 모바일 화면 모두에서 로고 크기를 키우고 싶으신 분들을 위해:

  1. 사용자 지정 → 테마 → 기본 → CSS/HTML 편집

a) 데스크톱 버킷에 다음을 입력하세요:

.d-header {
  height: 5em;
}
.d-header #site-logo {
  height: 5em;
}

b) 모바일 버킷에 다음을 입력하세요:

.d-header #site-logo {
  max-width: unset;
}
.d-header #site-logo {
  height: 4em;
}

이것들은 하나의 규칙으로 통합할 수 있습니다:

.d-header #site-logo {
  max-width: unset;
  height: 4em;
}

첫 번째 규칙 세트도 압축할 수 있다고 생각하지만, 바로 떠올리지는 못하겠습니다.

추가로 유용할 것 같은 점은 패딩을 줄여서 모바일 보기에서 로고를 왼쪽으로 이동시키는 방법입니다. 어떻게 생각하세요?

.wrap {
  padding-left: 0;
}

이 시점에서 CSS 입문 과정을 수강하는 것이 좋은 생각이 될 수 있습니다. 그 이유는 다음과 같습니다:

직접 테마를 개발하는 방법에 대한 자세한 내용은 개발 카테고리에서 확인할 수 있습니다.

찰리, 감사합니다. 정말 고맙습니다.
인스펙터(예: Firefox)를 사용해 몇 가지 해결책을 도출하는 데는 익숙합니다.

왜 로고 리사이즈가 Discourse의 핵심 기능에 포함되지 않는지 궁금합니다. 어떤 웹사이트든 브랜딩은 매우 중요한데, 이 부분에서 세밀한 설정이 부족하다는 점은 놀랍습니다.

"로고 조작"은 테마 및 테마 컴포넌트 내에서 다른 모든 스타일링 유형과 마찬가지로 완벽하게 가능합니다.
본인이 직접 작업을 수행하려면 html/css/js의 기초를 학습하고 메타에 있는 방대한 문서를 살펴봐야 하며, 원하는 변경 사항을 수행할 사람을 고용해야 합니다.

후자의 경우 마켓플레이스 카테고리에서 처리할 수 있습니다.

원래 질문이 답변되었으므로, 이제 이 주제를 종료할 수 있다고 생각합니다.

포럼 운영에 성공을 기원합니다.

개인적으로는 회사 로고 크기를 포럼 플랫폼의 핵심 기능에 포함시키는 것을 기대하지 않습니다. 또한, 저희 소프트웨어는 오픈소스이며, 위에서 보여드린 것처럼 이를 달성하는 데 도움을 드리기 위해 관련 지원을 제공하고 있습니다. 직접 커스터마이징을 개발하는 법에 대한 정보도 많이 제공하고 있습니다.

찰리님, 안녕하세요.

"로고 조작"이라고 한 것은 UI에서 로고의 크기를 변경할 수 있는 기능을 의미했습니다.

도움 주셔서 감사합니다.