[엘리멘터] 모바일 어떤 위젯이든 가로 스크롤 적용하기

안녕하세요. 유피입니다.

모바일 가로 스크롤과 관련된 포스팅은 아마도? 마지막이 될것같습니다.

 

엘리멘터로 웹사이트를 만들면 컨테이너 안에 다양한 위젯을 넣어서 꾸미게 됩니다.

물론 데스크탑으로 봤을때 이쁘지만 모바일로 봤을때 마음에 들지 않을때가 많습니다.

 

위의 사진은 하나의 컨테이너 안에 3개의 아이콘 상자를 넣어서 만들었습니다.

모바일로 보면 어떨까요?

 

예상한대로 모바일에서는 화면이 작기 때문에 아이콘 상자들이 아래 정렬로 보입니다.

휴대폰의 기기마다 다르겠지만 아이콘 상자만으로 화면을 꽉 채우니 보기가 별로네요.

보기 흉하니깐~

한줄코딩으로 가로 스크롤을 만들어봅시다!

 

코드는 컨테이너의 고급 - 커스텀 CSS에 작성하시면됩니다.

selector{
     overflow: auto;
}

다음으로 컨테이너에서 모바일 기준 아래 사진과 동일하게 설정해주세요.

컨테이너 - 레이아웃 - 항목에서 설정할 수 있습니다.

 

아이콘 상자도 설정해줘야겠죠?

아이콘 상자 위젯 - 고급 탭에서 아래 사진과 같이 설정해주세요.

 

(너비는 자유롭게 설정해주시면 됩니다.)

 

끝!

 

휴대폰 기기에서 가로 스크롤 기능이 적용되었는지 확인해보세요.