모바일에서 CSS 수정 사항이 적용되지 않음

제품 지원
1

CSS 관련해서 누군가 도와줄 수 있을까요?

Making custom CSS changes on your site 가이드를 따라가며 변경 사항을 적용했는데, 데스크톱에서는 잘 반영되지만 모바일에서는 적용되지 않습니다.

이 예시에서는 사용자 프로필 페이지와 사용자 프로필 카드에서 Location(위치)을 숨기려고 하고 있습니다.

CSS > Common에 아래 내용을 적용했습니다:

/* Hide the User Location from their public profile page */
.user-profile-location {
  display: none;
}
/* Hide the User Location from their user card */
.user-card .location-and-website .location {
  display: none;
}

macOS 노트북의 Safari와 Chrome에서 테스트해보니 둘 다 숨겨져 있습니다:

Screenshot 2025-02-23 at 18.52.47
Screenshot 2025-02-23 at 18.52.471920×940 132 KB

iPhone의 Safari와 Chrome에서 테스트해보니 둘 다 여전히 잘 보입니다 :thinking:

IMG_2192.PNG
IMG_2192.PNG960×2079 118 KB

위에서 언급했듯이 여러 브라우저에서 동일한 상황이 발생합니다.

마찬가지로, 아래 CSS를 사용하여 공개 프로필에서 일부 사용자 정의 필드(Custom User Fields)를 숨기고 있습니다:


/* Hide the social media platforms from the lower part of their public profile page */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

그리고 사용자 카드(User Card)에서는 이렇게 숨기고 있습니다:

/* Hide the social media platforms from the lower part of their user card */
.public-user-field__you-tube, .public-user-field__vimeo, .public-user-field__instagram, .public-user-field__x-\(twitter\), .public-user-field__facebook, .public-user-field__tik-tok {
    display: none;
}

하지만 이것들도 모바일에서는(프로필과 카드 모두에서) 여전히 보입니다 :thinking:

제가 어디를 잘못하고 있는지 알아봐 주실 수 있을까요? :person_shrugging:

3

수정 사항은 확인했지만, 대상이 충분히 구체적이지 않아서 핵심 CSS에 의해 덮어씌워졌습니다.
브라우저에서 요소를 검사하면 이를 확인할 수 있습니다. 예:

The image shows CSS code with styles for elements like 'about', 'details', 'user-profile-location', and 'user-profile-website', including properties like 'justify-content', 'display', and 'argin-right', with content slightly obscured by a red horizontal line. (Captioned by AI)
The image shows CSS code with styles for elements like 'about', 'details', 'user-profile-location', and 'user-profile-website', including properties like 'justify-content', 'display', and 'argin-right', with content slightly obscured by a red horizontal line. (Captioned by AI)605×361 9.07 KB

규칙에 !important를 추가하거나, 다음과 같이 더 구체적으로 지정해야 합니다:

.user-profile-location {
    display: none !important;
}

.user-main .about .details .user-profile-location {
    display: none;
}

예기치 않은 요소를 대상으로 하지 않도록 규칙을 올바르게 지정하는 것이 일반적으로 권장됩니다.

4

흥미롭네요, 감사합니다 @Arkshine :smiley:

넓게 적용하거나 !important 오버라이드를 사용하는 것보다는, 정확한 요소를 구체적으로 타겟팅하고 싶습니다.

이러한 특정 요소 이름들은 어떻게 도출하신 건가요:

.user-main .about .details .user-profile-location {

오른쪽의 스타일 패널에서:

Screenshot 2025-02-23 at 20.04.32
Screenshot 2025-02-23 at 20.04.321920×967 146 KB

아니면, 더 위로 스크롤하여 부모 요소를 수동으로 기록해야 하는 건가요?

.primary .primary-textual을 추가할 필요가 없는 이유는 무엇인가요? :thinking:

Screenshot 2025-02-23 at 20.06.15
Screenshot 2025-02-23 at 20.06.151512×912 190 KB

5

코어가 하는 것을 그대로 복사해서 붙여넣었습니다:

image
image603×118 3.69 KB

같은 규칙을 적용하더라도 TC CSS는 코어보다 나중에 적용되므로, 이렇게 하면 문제가 없습니다.

CSS 특이성(specificity)에 대한 자세한 내용은 여기에서 확인하세요: Specificity - CSS | MDN.

모든 부모 요소를 포함할 필요는 없으며, 범위를 충분히 구체적으로 줄이기 위해 주요 섹션만 포함하면 됩니다.

6

저를 혼란스럽게 한 부분이 바로 그 점인 것 같습니다.

이제 데스크톱과 모바일 모두에서 완벽하게 작동하고 있으며, 광범위하거나 !important를 사용하지 않고 특정 대상에 맞게 적용되었습니다.

도와주셔서 다시 한번 감사합니다 :bowing_man:

7

완벽함을 위해, 그리고 혹시 다른 분들에게 도움이 될까 해서 공유합니다.

사용자 정의 필드 중 일부를 숨기려고 시도했던 CSS입니다:

/* 공개 프로필 페이지 하단에서 소셜 미디어 플랫폼을 숨김 */
.instagram, .tik-tok, .facebook, .you-tube, .x-\(twitter\), .vimeo {
    display: none;
}

데스크톱과 모바일 모두에서 작동하도록 다음과 같이 수정해야 했습니다:

/* 프로필 페이지 하단에서 소셜 미디어 플랫폼을 숨김 */
.user-main .about .details .public-user-fields .you-tube, .user-main .about .details .public-user-fields .vimeo, .user-main .about .details .public-user-fields .instagram, .user-main .about .details .public-user-fields .x-\(twitter\), .user-main .about .details .public-user-fields .facebook, .user-main .about .details .public-user-fields .tik-tok {
    display: none;
}