반응형 해상도 관련 수정 방법 문의

안녕하세요.

현재 KBoard의 card-gallery 스킨을 사용하고 있는데 기본 반응형 코딩이라 모바일과 PC에서 보이는 화면이 각각 다릅니다.

PC버전의 축소 및 세로 확장 형태가 모바일인데 이걸 해상도를 조정하거나 PC와 모바일 동일하게 띄우려고 한다면 어떤 부분을 변경해야 하는지 어렵습니다. 

CSS 코드를 수정하여 접속한 기기에 따라 해상도를 원하는 형태로 지정하거나 또는 해당 반응형 CSS 코드를 지우거나 하고 싶은데 어떤 부분을 수정해야 할까요?

현재 보여지는 모바일 화면이며 가로에 1개 콘텐츠 노출이 아닌  2~4개의 콘텐츠가 가로에 노출되는 방식입니다

 

사이트 주소

https://korea-dcm.com/issue/
https://korea-dcm.com/dcm/

 

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

감사합니다.
 

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

    KBoard 플러그인 카드 갤러리 스킨 게시글 목록 페이지에서

    모바일일 때 한 줄에 표시되는 게시글의 수를 PC와 동일하게 하시려면

    워드프레스 관리자 -> 외모(테마 편집기) -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보시겠어요?

    @media screen and (max-width: 600px) {
    	#kboard-card-gallery-list .kboard-list-item { margin: 0 1% 1% 0; width: 32%; }
    }

    위의 코드에서 32% 부분을 24%로 수정하시면 한 줄에 4개씩 표시하실 수 있습니다.

    2개씩 표시되게 하시려면 49%로 수정해서 확인해보시겠어요?

    고맙습니다.

  • 안녕하세요 

    알려주신 방법으로 적용을 해보니 3개의 콘텐츠가 노출되며 가로 폭이 너무 좁습니다. 

    아래 이미지와 같은 상태이며 혹시 2개의 콘텐츠 노출로 조정이 될지 다시 한번 조언을 구합니다 

    콘텐츠와 콘텐츠 사이의 간격이 너무 좁게 설정이 되지 않았으면 좋겠습니다.

    https://imgur.com/a/BISAbSS

  • 한 줄에 2개씩 표시되게 하시려면

    이전 댓글에 안내해드린 코드 중 32% 부분을 49%로 수정해서 확인해보시겠어요?

    콘텐츠와 콘텐츠 사이의 여백을 늘리시려면 margin 속성 쪽의 값을 늘려보세요.

    margin 속성 쪽 값이 늘어나는 만큼 width 값도 줄어들어야 합니다.

    고맙습니다.

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기