안녕하세요 라이믹스로 커뮤니티 사이트 구축중인데요 위젯 페이지의 레이아웃 관련하여 해결되지 않는 부분이 있어 문의드립니다.

 

현재 equeer 레이아웃을 이용중이어서 레이아웃이 반응형으로 모바일 레이아웃/PC 레이아웃이 지원되는데요.

다만 위젯 페이지의 위젯의 경우 모바일/PC 를 별도로 설정해놓았는데 이 부분은 반응형으로 지원이 되지 않습니다.

 

PC 의 경우 2:1 비율로 좌우를 나누어 각각 위젯을 배치하였고, 모바일의 경우 모든 위젯이 풀사이즈로 나오게 배치하였는데요.

PC 브라우저 크기를 줄이면, 레이아웃은 모바일 레이아웃으로 바뀌지만 위젯 페이지가 모바일 버전으로 변경되지 않으니 이상하게 나오는 것 같아 이 부분을 해결하고 싶습니다.

 

본론은

웹 브라우저 크기를 자동으로 인식해서 800px 이상 → PC 레이아웃 표시 / 799 px 이하 → 모바일 레이아웃 표시

이런 식으로 기능 구현하는 방법이 어떻게 있을까요?

 

XE TOWN 의 홈페이지의 경우 메인 페이지가 반응형으로 위젯 배치가 자동으로 변하더라고요,

이 부분을 계속 검색해보고 찾아보았는데도 잘 나오지 않아 문의드립니다.

 

도움주신다면 매우 감사드리겠습니다.

 

 

아래 이미지는 제 웹사이트의 PC 버전, 작은 브라우저 크기일 때 입니다.

우선 메인 배너가 모바일에서는 사라지도록 되어있지만 반응형의 경우 이 기능이 제대로 작동되지 않고, 위젯 배치의 경우도 비율이 작아져 이상하게 나옵니다.

스크린샷 2022-10-17 오후 10.51.10.png

 

반면 XE TOWN 홈페이지의 경우 같은 PC 브라우저임에도 브라우저 크기에 따라 레이아웃이 자동으로 바뀝니다.

이런 기능이 필요합니다.

스크린샷 2022-10-17 오후 10.51.02.png스크린샷 2022-10-17 오후 10.50.56.png.jpg

 

  • ?
    css의 media screen 찾아보시면 답이 나올겁니다.
  • profile
    @media all and (max-width: 769px) {

    .content-wrapper{
    display:flex;
    flex-direction:column;
    }
    .xe-widget-wrapper{
    width:100% !important;
    }

    }

    레이아웃의 메인 페이지일 경우에 이런 코드를 css로 넣어두시면 됩니다.
  • profile
    .content-wrapper는 각 위젯들을 감싸는 본문 영역의 div입니다.
    .xe-widget-wrapper는 각 위젯을 담당하는 위젯 div입니다.
  • profile ?

    덕분에 해결했습니다! 감사합니다!

     

    @media 는 알고 있었지만 라이믹스 상에서 어떻게 적용시켜야 할 지 안잡혀 있었는데, 확실하게 알았습니다!