친절한효자손 취미생활

친효스킨을 사용중이신 어떤분께서 문의를 해주셨습니다. 친효스킨의 모바일 페이지 화면에서 댓글 텍스트 크기를 가로로 100% 늘릴 수 없는지에 대해서요. PC에서는 매우 보기좋게 출력이 되지만 모바일의 경우는 아무래도 가로 크기에 제한이 있으니 몇 글자 안 들어가있는 댓글의 경우라면 큰 문제는 없지만, 긴 글의 댓글은 세로로 길어져서 보기가 조금 힘들수도 있습니다. 그래서 이런 부분을 조금이라도 해소하고자 문의를 주신 것 같습니다.

 

문제의 상황을 스크린샷으로 보여드립니다. 이런 상황입니다. 댓글 말풍선의 여백을 최대한 가로로 키울 수 있는지에 대한 문의인 것입니다. 간단합니다. 해결 방법을 알아보겠습니다. CSS에서 다음의 코드를 찾습니다.

 

#contents .commentList .rgy-rewrite-window .rgy-rewrite-window-right .rgy-rewrite-window-right-bottom .re-chatwindow,
#contents .commentList .rgy-rewrite-window2 .rgy-rewrite-window2-right .rgy-rewrite-window2-right-bottom .re-chatwindow {
    position: relative;
    display: inline-block;
    max-width: calc(100% - 100px);
    padding: 10px 15px;
    margin-top: 5px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.2rem;
    background-color: #eee;
    word-break: break-all;
    -webkit-word-break: break-all;
    vertical-align: text-bottom;
}

이 부분을 찾아주시면 됩니다. 여기에서 max-width: calc(100% - 100px); 를 삭제하거나 주석 처리합니다. 이게 가로의 최대 크기를 설정하는 코드입니다. 수정 완료 후 확인해 보시기 바랍니다.

 

수정 완료 후 살펴보겠습니다. 친효스킨 모바일 페이지에서의 댓글 말풍선 모습입니다. 이제 댓글 말풍선이 가로로 풀사이즈로 정상 출력됨을 확인했습니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band