정보&강의 XE 위젯을 반응형으로 적용하자.
- 운영자
- 1148
- 0
첨부 1
- image.png (File Size: 31.2KB/Download: 1)
XE를 사용하면서 가장 불만인게 메인페이지의 위젯이 반응형으로 작동되지 않는다는 점이다.
반응형에 대한 수요는 많다. 또 많은 부분에서 반응형에 대한 요구사항을 반영하여 업데이트를 하는데 유독 위젯에서의 반응형 지원은 되지 않는 것이 이해가 되지 않는다.
이 문제로 모바일 스킨을 별도로 구매하는 경우도 있는 듯한데 더 이상 골치 아프지 말도록 하자.
그럼 위젯을 반응형으로 적용하는 방법을 알아보자.
방법은 아주 간단하다.
먼저, 위젯 크기를 적용하는 화면에서 위젯 CSS Class 명을 적어준다.
예제에서는 xe-widget이라고 적었다.
다음으로 자신이 원하는 위젯스타일을 적용한다.
그리고 위젯스타일의 CSS 파일을 아래와 같이 수정한다.
@media screen and (max-width:639px){ .xe-widget { width: 100% !important; box-sizing:border-box; } } @media screen and (min-width: 640px){ .xe-widget { width: 49% !important; box-sizing:border-box; } }
이용시 참고할 점.
1. max-width 값과 min-width 값은 원하는 값으로 수정하면 된다.
2. 이 방법은 모든 위젯스타일에 적용할 수 있다.
#xe-widget #screen #min-width #위젯 #반응형 #모바일스킨 #반응형지원 #widget #스타일 #불만
이런 글도 찾아보세요!
추천인 1
댓글 0
권한이 없습니다. 로그인