CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

블로그

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

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

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


@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로 수정했습니다.