모바일에서 해당 영역을 가운데 정렬하시려면

사용자 정의하기 쪽 CSS 입력 필드에

아래의 코드도 추가해서 확인해보시겠어요?

@media screen and (max-width: 600px) {
	#post-53 .cafe-main { width: 100%; }
	#post-53 .cafe-main .su-tabs { float: none; margin: 0 auto; }
}

고맙습니다.

.cafe-main { max-width: 670px; margin: 0 auto; }
@media screen and (max-width: 600px) {#post-53 .cafe-main { ??????;}}

위 구문을 쓰고 ?? 부분에 여러가지 적용해보고 있는데 모바일에서 이 두개의 메뉴가 위아래로 왼쪽 정렬인 것을 가운데 정렬로 수정해주려면 어떻게 해야할까요?

올려주신 페이지에서 직접 확인해보니

추가하신 코드를 정상적으로 인식하지 못하는 듯합니다.

복사 -> 붙여넣기로 추가하신 건지요?

이전 댓글에 안내해드린 코드를 직접 입력해서 확인해보시겠어요?

어떻게 추가하셨는지도 알려주시겠어요?

고맙습니다.

https://xion.kr/?page_id=53 해당 페이지 편집할때 '카페 신청하기'버튼에 마우스오버시

<a title="xion은 크리에이터의 카페공간을 제공합니다." href="http://xion.kr/?page_id=180"> 

를 적용했는데 이 적용부위가 양옆으로 삐져나오는것 같은데 어떻게 처리하면 좋을까요?

하얀색 배경 표시되는 건 테마 쪽에서 설정하고 있는 듯합니다.

아래의 CSS 코드도 추가해보시겠어요?

.entry #post-53 p a:hover { background: none; }

고맙습니다.

그런데 https://imgur.com/a/1NEP8W4 보시면 삐져나온 부분이 있어서

#post53 .hentry .entry-content a: visited { background: transparent; } 적용해봤는데 적용이 안되서요..

한번 봐주시겠어요? ^^;;

float 속성은 어느 부분에 추가하신 건지요?

추가하신 탭을 감싸고 있는 영역의 max-width 값도 수정해주셔야 할 듯합니다.

워드프레스 관리자 -> 외모(테마 디자인) -> 사용자 정의하기 -> CSS 입력 필드에

아래의 코드를 활용해보시겠어요?

#post-53 .cafe-main { max-width: 100%; }
#post-53 .cafe-main .su-tabs { float: left; width: 48%; margin-right: 1%; }

고맙습니다.