원더풀 제품 스킨 썸네일 크기

https://imgur.com/bUH8wm4

모바일에서 썸네일이 너무 작게 나오는데 키우는 방법은 없나요?

가능하면 웹쪽 설정은 안건드리고 모바일쪽만 키우고싶습니다.

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

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

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

    #kboard-wonderful-product-list .kboard-list .kboard-list-item .kboard-wonderful-product-thumbnail { min-height: 170px; }

    위의 코드에서 픽셀 값은 적절히 수정해보세요.

    고맙습니다.

  • http://iiko.co.kr/mentor/

    웹쪽도 좀 더 키우고싶은데 어떻게 하나요?

    가능한 여백을 좀 작게하고 썸네일을 키워서 가독성을 늘리고 싶습니다.

  • 그리고 같은 화면 아래쪽에 "마지막"버튼을 지우고 싶습니다.

    또한 모바일에서는 현재 페이지 번호가 하나씩만 나오고 있는데 그 부분도 수정하고 싶습니다.

  • PC 화면과 모바일 화면에서 크기를 다르게 적용해주셔야 할 듯합니다.

    기존의 코드 대신 아래의 코드로 교체해보시겠어요?

    #kboard-wonderful-product-list .kboard-list .kboard-list-item .kboard-wonderful-product-thumbnail { min-height: 350px; }
    @media screen and (max-width: 600px) {
    	/* 모바일에서 실행됩니다. */
    	#kboard-wonderful-product-list .kboard-list .kboard-list-item .kboard-wonderful-product-thumbnail { min-height: 220px; }
    }

    위의 코드에서 350px 부분과 220px 부분은 적절히 수정해주세요.

     

    페이징 부분에서 마지막을 안 보이게 하시려면

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

    #kboard-wonderful-product-list .kboard-pagination .kboard-pagination-pages li.last-page { display: none; }

    처음을 안 보이게 하시려면

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

    #kboard-wonderful-product-list .kboard-pagination .kboard-pagination-pages li.first-page { display: none; }

    고맙습니다.

  • 모바일에서는 의도적으로 페이징 넘버는 하나만 나오고 좌우 화살표와 처음, 마지막 버튼만 나오도록 되어있습니다.

    모바일에서는 화면이 좁기 때문에 하나만 나오도록 적용되어 있으며 다른 스킨도 마찬가지입니다.

     

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

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

    @media screen and (max-width: 600px) {
    	#kboard-wonderful-product-list .kboard-pagination .kboard-pagination-pages li { display: inline-block; } 
    }

    고맙습니다.

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