스마트에디터 반응형 CSS 추가

640 이하에서만 맞추면 될 것 같아서 640 이하로만 맞췄습니다.

/plugin/editor/smartdeitor2/css/ko_KR/smart_editor2.css

파일 맨 아래에

@media (max-width: 640px){
 #smart_editor2 .se2_text_tool { position: relative; display: flex; flex-wrap: wrap; z-index: 30; padding: 5px; background: #f4f4f4 url(../../img/bg_text_tool.gif) 0 0 repeat-x; border-bottom: 1px solid #b5b5b5; }
 #smart_editor2 .se2_text_tool > ul { position: relative; width: auto; margin-right: 3px; margin-bottom: 5px; padding: 0; }
 #smart_editor2 .se2_text_tool > ul:last-child { margin-right: 0; }
 #smart_editor2 .se2_text_tool li.husky_seditor_ui_fontName,
 #smart_editor2 .se2_text_tool li.husky_seditor_ui_fontSize,
 #smart_editor2 .se2_text_tool li.husky_seditor_ui_fontColor,
 #smart_editor2 .se2_text_tool li.husky_seditor_ui_BGColor { z-index: 60; }
 #smart_editor2 .se2_text_tool .se2_font_type li { margin-left: 0; }
 #smart_editor2 .se2_text_tool .se2_font_type li:first-child { margin-left: -1px; margin-right: 3px; }
 #smart_editor2 .se2_text_tool .se2_multy { position:relative; float: left; display: inline; border: 0; margin-right: 3px; padding-left: 1px; white-space: nowrap; }
 #smart_editor2 .se2_text_tool .se2_multy .se2_photo { height: 21px; width: 60px; text-align: center; background: #fff; border: 1px solid #c3c3c3; border-radius: .25rem; }
 #smart_editor2 .se2_text_tool .se2_multy .se2_photo .se2_icon { height: 21px; line-height: 21px; margin: -5px 2px 0 -1px; }
 #smart_editor2 .se2_text_tool .se2_multy .se2_photo .se2_mntxt { height: 21px; line-height: 21px; }
 #smart_editor2 .se2_inputarea_controller { width: auto; padding-left: 10px; }
}

 

추가해 주시면 됩니다.

단, 모바일에서 특문 사용 시 레이어가 벗어나는 건 잡을려니 손이 너무 많이 갈듯 해서 그냥 포기했네요;




#smart_editor2{margin-right:1px !important;min-width:100px !important}
@media screen and (max-width: 640px){
 #smart_editor2 .se2_text_tool ul:nth-child(4n){clear:both;}
 #smart_editor2 .se2_text_tool ul{margin-bottom:4px}
 #smart_editor2 .se2_text_tool ul:nth-child(n+4){margin-bottom:0}
 #smart_editor2 .se2_text_tool .se2_multy,#smart_editor2 .se2_text_tool .se2_multy button, #smart_editor2 .se2_text_tool .se2_multy button span{height:54px}
}
@media screen and (max-width: 515px){
 #smart_editor2 .se2_text_tool ul:nth-child(3n){clear:both;margin-left:4px}
 #smart_editor2 .se2_text_tool ul:nth-child(6n),#smart_editor2 .se2_text_tool ul:nth-child(4n){clear:none;margin-left:0}
 #smart_editor2 .se2_text_tool ul:nth-child(n+3){margin-bottom:0}
}
@media screen and (max-width: 370px){
 #smart_editor2 .se2_text_tool ul:nth-child(2n){clear:both;margin-left:4px}
 #smart_editor2 .se2_text_tool ul:nth-child(3n){clear:both;margin-left:4px}
 #smart_editor2 .se2_text_tool ul:nth-child(6n),#smart_editor2 .se2_text_tool ul:nth-child(4n){clear:none;margin-left:0}
 #smart_editor2 .se2_text_tool ul:nth-child(n+3){margin-bottom:0}
 #smart_editor2 .se2_text_tool .se2_multy,#smart_editor2 .se2_text_tool .se2_multy button, #smart_editor2 .se2_text_tool .se2_multy button span{height:79px}
}
@media screen and (max-width: 325px){
 #smart_editor2 .se2_text_tool .se2_multy,#smart_editor2 .se2_text_tool .se2_multy button, #smart_editor2 .se2_text_tool .se2_multy button span{height:29px;}
 #smart_editor2 .se2_text_tool .se2_multy{border-bottom:1px solid #e0dedf}
}


0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기

HTML/CSS/기타

번호 제목 글쓴이 날짜 조회수
47 스마트에디터 반응형 CSS 추가 관리자 12-13 34
46 JS 글자수 체크(공백포함, 제외) 및 언어 옵션 설정 관리자 09-02 2,911
45 web chart - 실시간 차트 관리자 07-25 2,880
44 비동기 프로그래밍 관리자 07-25 2,829
43 table thead 고정과 tbody 스크롤 관리자 07-23 2,888
42 datepicker 사용하여 공휴일 직접 지정하기 관리자 06-11 2,943
41 Dropzone - 이미지 & 파일 업로드 (드래그 앤 드롭) 라이브러리 관리자 03-06 3,112
40 JSPDF 사용법(Javascript pdf) 관리자 03-04 3,455
39 FullCalendar(풀캘린더) 어거지 사용법 관리자 01-25 3,296
38 JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${} 관리자 12-28 3,123
37 [CSS] 가로 스크롤 구현하기 관리자 12-27 3,281
36 JCROP을 이용한 업로드한 크롭( CROP ) 하기 관리자 12-27 3,245
35 제이쿼리 - 모달 다이아로그 및 여러 알림창들 관리자 12-21 2,949
34 Javascript/jQuery 이미지 회전 돋보기 관리자 11-07 3,350
33 Resolving the Issue of Fakepath in JavaScript 관리자 10-26 2,997
32 div 및 요소 화면 중앙에 위치시키기 관리자 10-21 3,016
31 [Jquery] 체크박스 전체 체크 , 해제 하는 방법 관리자 10-19 3,052
30 display 스타일 속성 사용하여 행 숨기기/보이기 관리자 09-16 3,437
29 자주 사용하는 비주얼 스튜디오 코드(Visual Studio Code, VSC, vscode) 단축키 정리 관리자 09-14 3,559
28 div 2개 나란히 정렬하는 방법 관리자 09-09 3,242