모바일에서 화면이 잘못 표시됩니다

기여 UX
,
1

image
모바일에서 해당 블로그 링크가 부모 요소의 왼쪽 하단에 표시됩니다. 그 이유를 파악할 수 없습니다.

데스크톱에서는 정상적으로 표시됩니다.

참고로, 데스크톱 전용(모바일에서 display: none)인 다른 링크가 있으며, 이를 약간 이동시키기 위한 사용자 정의 CSS(margin-left: 100px;)가 적용되어 있습니다. 이 사용자 정의 CSS를 끄면 아무런 변화가 없는데, 이는 예상되는 결과입니다.

커스텀 헤더 링크 HTML:

    <ul class="custom-header-links">
      <li class="headerLink headerLink--vdo 👆adapter-son-yoga.com--custom-header-links headerLink--undefined">
        <a title="Adapter Son Yoga" href="https://adaptersonyoga.com/" target="_blank">
          👆adapter son yoga.com 
        </a>
      </li>
      <li class="headerLink headerLink--vmo blog-custom-header-links headerLink--undefined">
        <a title="blog" href="https://adaptersonyoga.com/" target="_blank">
          Blog
        </a>
      </li>
  </ul>

두 번째 li 요소에는 특별한 CSS가 없고, 포함된 a 링크의 CSS는 다음과 같습니다:

    .custom-header-links .headerLink a {
	padding: .35em .6em;
	color: var(--header_primary);
	font-size: var(--font-up-1);
    }

이것은 버그인가요, 아니면 제가 놓치고 있는 것이 있나요?

1개의 좋아요
2

링크의 패딩이 어떻게 감싸지는지에 따른 문제라고 생각하는데, 이 문제를 방지하기 위한 변경 사항을 방금 병합했습니다.

1개의 좋아요