콘텐츠로 건너뛰기
메뉴
커뮤니티에 참여하려면 회원 가입을 하시기 바랍니다.
신고된 질문입니다
1 회신
4425 화면

Dear all,


We have a website for which we would like to use a separate template for the mobile version. We have not found any documentation on how to do it. How can we do this? 


Best,

아바타
취소
베스트 답변

Hi,

For that, you need to create two templates, One desired for the desktop and the other one desired for mobile. Next what you have to do is do the styling for both templates using media query. Choose the screen width to show the mobile screen view and using the class or id for the top tag of mobile view and desktop view, give css as follows.

@media (max-width: 'give the screen width') {
'selector for mobile template' {
display: block;
}
'selector for desktop template' {
display: none;
}
}

Please note that first you need to give 'd-none' in mobile template to hide it in normal screen.

Or you can also achieve this using bootstap classes.

Screen size Class
Hidden on all                 .d-none
Hidden only on xs          .d-none .d-sm-block
Hidden only on sm         .d-sm-none .d-md-block
Hidden only on md         .d-md-none .d-lg-block
Hidden only on lg            .d-lg-none .d-xl-block
Hidden only on xl            .d-xl-none .d-xxl-block
Hidden only on xxl          .d-xxl-none
Visible on all                   .d-block
Visible only on xs           .d-block .d-sm-none
Visible only on sm          .d-none .d-sm-block .d-md-none
Visible only on md          .d-none .d-md-block .d-lg-none
Visible only on lg            .d-none .d-lg-block .d-xl-none
Visible only on xl            .d-none .d-xl-block .d-xxl-none
Visible only on xxl          .d-none .d-xxl-block

Regards

아바타
취소
관련 게시물 답글 화면 활동
0
5월 20
2691
1
6월 24
3598
1
10월 22
3390
1
12월 21
4546
1
2월 21
2015