미디어위키:Mobile.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
• 오페라: Ctrl-F5를 입력.

/* 여기의 모든 CSS는 모바일 사이트를 사용하는 사용자에게 로드됩니다 */

/* mw-collapsible 테이블이 화면을 넘지 않도록 조정 */
.mw-collapsible {
    width: 100% !important;
    max-width: 100%;
    text-align: left;
    background: #f9f4e6;
    border: 1px solid #0a0a0a;
    padding: 10px;
    font-size: 16px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden; /* 강제로 가로 스크롤 막음 */
}

/* mw-collapsible 내용이 화면을 넘지 않도록 조정 */
.mw-collapsible-content {
    display: block !important;
    max-width: 100%;
    overflow-x: hidden; /* 강제로 가로 스크롤 막음 */
}

/* 표 크기 자동 조정 */
.mw-collapsible table {
    table-layout: auto; /* 내용에 따라 자동 조정 */
    width: 100% !important;
    max-width: 100%;
    word-break: break-word;
    overflow-x: auto;
}

/* <poem> 태그가 화면을 넘지 않도록 설정 */
.mw-collapsible poem {
    display: block;
    white-space: normal !important; /* 강제 줄바꿈 적용 */
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 모바일에서 표가 넘칠 경우 대비 */
@media screen and (max-width: 768px) {
    .mw-collapsible {
        display: block !important;
        overflow-x: hidden;
    }
    .mw-collapsible table {
        display: block;
        overflow-x: auto;
        white-space: normal;
    }
}