첨부파일 https://eond.com/blog/360917

이온디 에디션 레이아웃의 경우 사이드바가 있는 반응형 레이아웃입니다.

사이드바의 경우 일정 너비 이하로 줄어들 경우 사라지거나 넓이를 줄일 수 있지만

컨텐츠의 경우 가운데 정렬일 경우 사이드바와 중쳡되는 경우가 발생하여


@media only screen and (max-width: 1200px) {

#eond_edition .container .lnb{width:120px }

#eond_edition .container .sidebar{display:none}

#eond_edition .container .content_box{margin-left:130px;)

}

@media only screen and (max-width: 1150px) {

#eond_edition .container .lnb,

#eond_edition .container .sidebar{display:none}

#eond_edition .container .content_box{margin-left:auto}

/* #eond_edition .header_wrap .header .btn_gnb{display:block} */

}


이렇게 사이드바가 줄어든 상태로 존재할 경우 사이드바 영역을 마진 auto인 content 레이어가 해당 영역을 침범하지 않도록

margin-left 값을 추가해넣었습니다.


그리고 다시 sidebar가 없어지고 margin 가로값이 auto로 정렬되어야할 경우엔 다시 margin-left:auto로 수정했습니다.

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 164 articles in 6 / 11 pages
번호 제목 제목 날짜날짜
공지 이온디에서 제작 배포 중인 레이아웃 2013/03/13
89 [XE기타] [XE위젯] 이온디 파일박스 배너위젯 2015/09/09
88 [레이아웃제작기] [이온디 에디션] 모바일에서의 터치슬라이딩 구현하기 파일 [2] 2015/09/01
87 [레이아웃제작기] [이온디 레모나] 참조 사이트 2015/08/29
86 [XE기타] 구매 페이지 템플릿 2015/08/26
85 [XE기타] 만들어볼 스타일의 레이아웃 2015/08/25
현재글 [레이아웃제작기] [이온디 에디션] 사이드바가 있는 경우 반응형 레이아웃의 컨텐츠 코딩 방법 2015/08/22
83 [레이아웃제작기] [이온디 에디션] 반응형 메뉴의 역할 2015/08/22
82 [레이아웃제작기] [이온디 에디션] 참조 반응형 웹사이트 2015/08/21
81 [레이아웃제작기] [이온디 온] 헤더 위젯 파일 2015/08/20
80 [레이아웃제작기] [이온디 에디션] 시안 20150820 파일 2015/08/20
79 [레이아웃제작기] 이온디 온 - 메인 작업 완료 80% 2015/08/18
78 [레이아웃제작기] 이온디 온 - 컨텐츠 위젯 디자인 2015/08/18
77 [레이아웃제작기] 이온디 온 - 컨텐츠 위젯 2015/08/12
76 [레이아웃제작기] 이온디 온 - 통합검색 2015/08/09
75 [레이아웃제작기] 이온디 온 레이아웃 로그인 UI 기획 러프 스케치 파일 2015/07/04

해시태그 디렉터리