스마트에디터 반응형 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; }
}
추가해 주시면 됩니다.
단, 모바일에서 특문 사용 시 레이어가 벗어나는 건 잡을려니 손이 너무 많이 갈듯 해서 그냥 포기했네요;
댓글 8개
#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}
}
[/code]
아래사진처럼요.. (사진은 다른거긴 하지만 설명을 위해서 첨부)
[http://sir.kr/data/editor/2111/8ab355821af843f379305d7be718d748_1637219484_6263.png]
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4426 | ||
| 2604 | 8개월 전 | 676 | ||
| 2603 | 8개월 전 | 735 | ||
| 2602 | 8개월 전 | 649 | ||
| 2601 |
 glitter0gim |
8개월 전 | 672 | |
| 2600 |
glitter0gim |
8개월 전 | 580 | |
| 2599 | 8개월 전 | 809 | ||
| 2598 | 8개월 전 | 604 | ||
| 2597 |
다케미카코
|
8개월 전 | 757 | |
| 2596 | 8개월 전 | 854 | ||
| 2595 |
 위토즈소프트 |
9개월 전 | 446 | |
| 2594 | 9개월 전 | 608 | ||
| 2593 |
만두먹고또먹고
|
9개월 전 | 938 | |
| 2592 | 9개월 전 | 613 | ||
| 2591 | 9개월 전 | 620 | ||
| 2590 | 9개월 전 | 690 | ||
| 2589 |
 팬텀디자인 |
9개월 전 | 760 | |
| 2588 | 9개월 전 | 479 | ||
| 2587 | 9개월 전 | 796 | ||
| 2586 | 9개월 전 | 644 | ||
| 2585 | 9개월 전 | 511 | ||
| 2584 | 9개월 전 | 578 | ||
| 2583 | 9개월 전 | 499 | ||
| 2582 | 9개월 전 | 644 | ||
| 2581 | 9개월 전 | 600 | ||
| 2580 |
만두먹고또먹고
|
9개월 전 | 517 | |
| 2579 |
위토즈소프트 |
9개월 전 | 665 | |
| 2578 | 9개월 전 | 649 | ||
| 2577 | 9개월 전 | 629 | ||
| 2576 | 10개월 전 | 562 | ||
| 2575 |
이슈DEV
|
10개월 전 | 993 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기