영카트 쇼핑몰 작업중 PC웹에서는 카테고리 메뉴가 정상적으로 나오는데 모바일웹에서는카테고리 메뉴텍스트가 겹쳐져서 보여지네요. 환경은 g5_shop_category의 ca_name 컬럼에 [code] ELECTRONIC ITEM [/code] 를 넣어서 불러온값입니다. 해당 쇼핑몰 모바일 주소 http://egshop.dothome.co.kr/kr/?device=mobile 입니다 정상적으로 나오는 웹주소 http://egshop.dothome.co.kr/kr/?device=pc 입니다 CSS문제는 아닌듯한데.. 어디가 문제일까요 혹시 비슷한 경험 있으신분 계신가요?

이전 목록 다음

채택완료

모바일웹에서의 텍스트겹침

앤시아

2019-10-03 (목) 15:13:14 3,816

영카트 쇼핑몰 작업중 PC웹에서는 카테고리 메뉴가 정상적으로 나오는데

모바일웹에서는카테고리 메뉴텍스트가 겹쳐져서 보여지네요.

환경은 g5_shop_category의 ca_name 컬럼에

Copy

<span><i class="fas fa-laptop fa-fw"></i> ELECTRONIC ITEM</span>

를 넣어서 불러온값입니다.

정상적으로 나오는 웹주소 http://egshop.dothome.co.kr/kr/?device=pc 입니다

CSS문제는 아닌듯한데.. 어디가 문제일까요 혹시 비슷한 경험 있으신분 계신가요?

모바일웹 폰트겹침 fontawesome

채택된 답변

+20 포인트

볼피드

2019-10-03 (목) 15:38:34

all.css에서 아래의 부분의 넓이를 바꿔주시거나

.fa-fw { text-align: center; width: 2.25em; }

아니면 아래와 같이

.fa-fw {text-align: center; width: auto; padding-right: 10px;}
이런식으로 해주시면 될 듯하네요

슈크

2019-10-03 (목) 15:54:23

항상 답변 감사드립니다. 볼피드님

한번 해보겠습니다.

마르스컴퍼니

2019-10-03 (목) 15:30:23

잘은 모르겠습니다만, fa-fw 를 빼면 되는 것 같습니다.

<i class="fas fa-laptop">

앤시아

2019-10-03 (목) 15:33:21

답변 감사드립니다. 마르스컴퍼니님 fa-fw가 폰트어썸 아이콘 정렬하는 부분이라 뺄수가 없습니다. ㅠㅠ

답변을 작성하려면 로그인이 필요합니다.