kboard 모바일 페이지 내 카테고리 메뉴 디자인 변경 문의

안녕하세요. 

먼저 많은 도움으로 kboard를 사용해 안정적으로 사이트를 유지할 수 있게 해주셔서 감사드립니다. 

현재 PC와 모바일에서 노출되는 카테고리 메뉴를 어떻게 하면 같은 형태의 디자인으로 적용할 수 있을지 고민하고 있습니다.

아래의 이미지가 PC에서 노출되는 카테고리 메뉴로 모바일도 동일하게 노출되기를 원하고 있습니다. 

https://imgur.com/a/PvHyxAe   -> PC 노출 

모바일의 경우 슬라이드 형태로 변경됩니다. 

https://imgur.com/a/qKTiP6b   -> 모바일 노출

모바일에서도 슬라이드가 아닌 PC와 동일한 형태의 일반 텍스트 배열 형태로 카테고리 메뉴를 노출하고 싶습니다.

많이 바쁘시겠지만, 도움 부탁드립니다.

감사합니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    KBoard 게시판에서 카테고리는 사용 중이신 스킨에 따라

    PC, 모바일 레이아웃이 조금 다를 수 있습니다.

    PC에서 탭 형식으로 표시되고 모바일에서 셀렉트 박스로 표시되는 건

    모바일은 비교적 표시할 영역이 좁기 때문입니다.

     

    어떤 스킨을 사용 중이신지 알려주시면

    CSS 코드로 모바일 카테고리가 PC와 동일하게 표시될 수 있을지 확인해보겠습니다.

    고맙습니다.

  • 안녕하세요. 바쁘신 중 확인 감사합니다.

    확인이 늦었습니다. 

    말씀하신 게시판에서 사용 중인 스킨은 card-gallery 스킨 입니다.

    위 문의드린 디자인 변경 적용이 가능할지 확인 부탁드립니다.

    감사합니다.

  • 카드 갤러리 스킨에서 기본 카테고리를 사용하신다면

    PC와 모바일 모두 셀렉트 박스로 표시하고 있습니다.

    코드를 별도로 수정하신 건지요?

    비회원으로도 확인 가능한 페이지 주소 알려주시면

    CSS 코드로 해결이 가능할지 살펴보겠습니다.

    고맙습니다.

  • 안녕하세요. 말씀 주신 것 처럼 CSS로 카테고리 스타일을 변경했습니다.
     

    적용된 css는 아래와 같습니다.

    #kboard-card-gallery-list .kboard-category { float: left; padding-bottom: 15px; width: 100%; }
    #kboard-card-gallery-list .kboard-category.category-mobile { display: none; }
    #kboard-card-gallery-list .kboard-category.category-pc { display: block; }
    #kboard-card-gallery-list .kboard-category select { display: inline; margin: 0 0 5px 0; padding: 0; width: 100%; min-width: 100%; height: 28px; line-height: 28px; font-size: 12px; color: #666666; border-radius: 0; border: 1px solid #f1f1f1; background: white; vertical-align: middle; box-shadow: none; box-sizing: border-box; text-indent: 0; -webkit-appearance: menulist; -moz-appearance: menulist; appearance: menulist; }
    #kboard-card-gallery-list .kboard-category .kboard-category-list { margin: 0 0 5px 0; padding: 0; list-style: none; border: 0; background-color: #f9f9f9; overflow: hidden; }
    #kboard-card-gallery-list .kboard-category .kboard-category-list li { display: inline-block; *display: inline; zoom: 1; margin: 0; padding: 0 5px; border: 0; list-style: none; }
    #kboard-card-gallery-list .kboard-category .kboard-category-list li::before,
    #kboard-card-gallery-list .kboard-category .kboard-category-list li::after { display: none; }
    #kboard-card-gallery-list .kboard-category .kboard-category-list li a { display: block; padding: 10px 10px 8px 10px; font-size: 13px; border: 0; border-bottom: 2px solid transparent; text-decoration: none; text-shadow: none; box-shadow: none; color: #515151; }
    #kboard-card-gallery-list .kboard-category .kboard-category-list li.kboard-category-selected a { font-weight: bold; border-bottom: 2px solid #545861; color: #545861; }

     

  • 안녕하세요.

    올려주신 페이지 주소로 확인해보니

    미디어 쿼리 쪽에 모바일에서는 셀렉트로 보이는 코드가 추가되어 있습니다.

     

    아래와 같은 CSS 코드가 추가되어 있다면 지워보시겠어요?

    @media screen and (max-width: 600px) {
    	#kboard-card-gallery-list .kboard-category.category-mobile { display: block; }
    	#kboard-card-gallery-list .kboard-category.category-pc { display: none; }
    }

    또는 워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보세요.

    @media screen and (max-width: 600px) {
    	#kboard-card-gallery-list .kboard-category.category-mobile { display: none; }
    	#kboard-card-gallery-list .kboard-category.category-pc { display: block; }
    }

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기