코스모스팜 스레드

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

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에 업로드한 뒤 링크 걸어주세요.
무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)