동적뷰 Flipcard View에서 '최근 항목' 글자 이탈 현상 수정하기

그림1

동적뷰의 7가지 뷰 중에서 Flipcard 뷰를 선택하면, <그림1>에서 보시는 바와 같이 최근 항목의 '목' 자가 박스를 이탈하는 현상이 발생합니다.

동적뷰를 꾸미거나 문제를 해결할 때 저는 주로 해외 블로거들의 글을 참고하는데요. 저 현상은 '한글' 블로그에서만 나타나는 문제이기 때문에 관련 글을 따로 찾을 수가 없었습니다.

그림2

크롬 브라우저로 요소 검사를 해본 결과, 이 현상은 CSS의 스타일 설정에서 너비(width)가 고정되어 있어서 발생하는 문제였습니다. 해당 요소의 CSS 스타일 설정을 따로해주었더니, 문제가 해결되는 모습을 볼 수 있었습니다.

두 가지 방식이 가능할텐데요.

하나는 <그림3>처럼 동일 간격을 유지하되 간격을 좀 더 넓게 설정해주는 방법이겠구요.

그림3

또 하나는 <그림4>와 같이 박스의 너비를 글자에 맞게 자동으로 조절하는 방식이 될 것입니다.

그림4

<그림3>처럼 동일 간격을 유지하고 싶다면 아래의 코드 중 첫번째 코드를, <그림4>와 같이 글자 수에 맞게 박스 너비를 조절하고 싶다면 두번째 코드를 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 의 위치에 삽입해줍니다.

 #controls ul#groups li {  
 width: 100px !important;   
 }  

 #controls ul#groups li {  
 width: auto !important;   
 }  

참고로, 첫번째 코드에서 너비가 반드시 100px일 필요는 없습니다. 글자가 이탈하지 않는 수준에서 적절할 너비를 입력해주면 됩니다.

데모 보기