Extra Form
PHP PHP 7.1
CMS XpressEngine

스케치북 게시판 웹진형에서 카드테두리로 사용히 모바일에서는 카드형태를 100%로 화면사이즈에 맞추지 못하나요?

css는 백날 손대도 안데던데요... 정말 이것땜시 환장하겠네요.ㅠ.ㅠ

 

!스케치북1.JPEG

위에가 pc화면이고요.

 

아래가 모바일에서 보이는 화면입니다.

!스케치북2.JPEG

스케치북3.JPEG

 

이런형태인데 모바일에서 카드 형태를 100%꽉차게 바꿀수있는 방법이 어떤것들이 있을까요?

크롬 개발자모드에서 아무리 CSS를 변경하고 몬짓을 해도 안되네요.ㅠㅠ.

  • ? Lv3
    이건 웹진형이 아닌걸로 알고있습니다.
    클라우드갤러리 아닌가요?
  • ? Lv3 Lv4

    웹진형 카드 테두리 맞습니다^^ 스샷에도 보이실텐데요?ㅠ.ㅠ

  • Lv4 ? Lv3
    아 카드스타일이 있군요~
  • ? Lv7
    아플로스 게시판 스킨 사용해 보세요
    카드형 선택하시고 반응형으로 너비에 따라 가로 아이템 갯수를 설정할 수 있습니다
  • ? Lv3
    요약부분때문에 그런것 같습니다.
    sketchbook5/css/board.css 파일에서
    .bd_zine.card .cnt{margin-top:1em;font-size:11px} 이부분을 아래와 같이 바꿔주시면 됩니다.

    .bd_zine.card .cnt{margin-top:1em;font-size:11px;height:18px;display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;text-overflow: ellipsis;word-wrap: break-word;overflow: hidden;}

    이렇게 하면 요약부분이 한줄로만 나옵니다.
  • ? Lv3 Lv4

    !모바일화면.JPEG

    그렇게 바꿔봐도 화면에 꽉차지는 않네요.ㅠ.ㅠ 모바일에서는 그냥 하나씩 보이는건 같네요. 화면에 꽉차고 패딩10px정도씩 줘서 꽉차게 보일려고 했는데 아무리해도 안되네요 그건.ㅠ.ㅠ

  • Lv4 ? Lv3

    아 질문이 이거였군요 ㅠ 제가 잘못봤네요

     

    sketchbook5/__setting.html 파일에서

    @media screen and (max-width:480px){
    <!--@if($mi->zine_thumb_width > 399)-->
    .bd_zine.card li{width:400px}
    <!--@elseif($mi->zine_thumb_width > 139)-->
    .bd_zine.card li{width:200px}
    <!--@else-->
    .bd_zine.card li{width:116px}
    <!--@end-->
    }

    를 아래처럼 바꾸면 됩니다.

    @media screen and (max-width:480px){
    <!--@if($mi->zine_thumb_width > 399)-->
    .bd_zine.card li{width:400px}
    <!--@elseif($mi->zine_thumb_width > 139)-->
    .bd_zine.card li{width:calc( 100% - 32px );}
    <!--@else-->
    .bd_zine.card li{width:116px}
    <!--@end-->
    }

  • ? Lv3 Lv4

    !스케치북모바일2.JPEG

     

    헛 정말로 감사드립니다. 전 계속 CSS파일만 들여다보고 있었는데 말이죠. 감사합니다.^^

  • ? Lv3 Lv3

    저도 정말 필요한 내용이었습니다.

    supreme 님 감사합니다.

     

    저는 위 내용의 아래 부분을 수정하였습니다. (필요하신 분 참조하세요)

    스케치북 스킨 1.8.42 버전

     

    @media screen and (max-width:360px){
    <!--@if($mi->zine_thumb_width > 279)-->
    .bd_zine.card li{width:300px}
    <!--@else-->
    .bd_zine.card li{width:calc( 100% - 32px );}
    <!--@end-->

     

    그동안 사용하지 못했던 카드 스타일 위 코드 한줄로 사용할 수 있어서 너무 좋습니다.

    다시 한번 감사드립니다.

  • Lv3 ? Lv8
    모바일 스킨설정에서 썸네일 이미지 가로폭을 350정도로 잡아 주면 꽉찬 형태로 나오지 않나요?
    게시판스킨에 m.skin 폴더에 스케치북 스킨 업로드 하시고 모바일 스킨을 스체치북 스킨으로 지정하신다음 모바일 설정을 따로 해주시면 될 듯 한데.
  • ? Lv8 Lv3
    모바일 스킨을 따로 사용하지 않고 스케치북 게시판 자체를 반응형으로 사용할 때의 적용 방법으로 알고 있습니다.