모던갤러리 썸네일 이미지 사이즈는 수정이 되는데 테두리는 사이즈가 그래로 입니다.

수고하십니다.

모던갤러리 리스트 썸네일 이미지 사이즈는 수정이 되는데 테두리는 사이즈가  이미지 만큼 줄어들지 않고 그대로 유지하고 있습니다.

list.php 파일과 style.css 파일 모두 수정 했는데도 변합이 없어요...ㅜㅜ

아래 사이트 주소 입니다.

 http://knpc.or.kr/?page_id=14785

 

 

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    아래 코드를 테마 추가 css에 삽입해보시거나

    스킨의 style.css 파일에서 찾아서 수정해보시겠어요?

    #kboard-modern-gallery-list .kboard-list .kboard-list-item .kboard-item-thumbnail { width: 100%; }

    고맙습니다.

  • 적용해 보았지만 아무런 변함이 없어요...ㅜㅜ

  • 이미지 크기만큼 리스트에 출력되는 게시글의 크기를

    조정하시고 싶으신건가요?

    아래코드를 테마 추가 css에 삽입해보시겠어요?

    #kboard-modern-gallery-list .kboard-list .kboard-list-item { width: auto !important; }

    위 코드가 적용이 안될 때

    사전에 추가하신 css 코드가 있으시다면

    답변달아주시겠어요?

    고맙습니다.

  • 한줄에 썸네일이 3개씩 보이게 하려고 합니다.

    현재 홈페이지 Site Width 넓이는 1000px 이며

    지금 적용되어 있는 사용자정의 CSS는 아래와 같습니다.

    /* 갤러리 메인사이즈조절*/
    #kboard-modern-gallery-list .kboard-list .kboard-list-item .kboard-item-thumbnail { display: block; width: 300px; height: 200px; line-height: 215px; }
     

     

  • 관리자->외모->테마 추가 css에 아래의 코드를 삽입해보시겠어요?

    #kboard-modern-gallery-list .kboard-list .kboard-list-item { width: 32.45%; margin: 0 1% 7px 0; }
    #kboard-modern-gallery-list .kboard-list .kboard-list-item:nth-child(3n) { margin: 0 0 7px 0; }
    #kboard-modern-gallery-list .kboard-list .kboard-list-item .kboard-item-thumbnail { width: 100%; min-height: 200px; height: auto; }
    
    @media screen and (max-width: 600px){
      #kboard-modern-gallery-list .kboard-list .kboard-list-item { width: 100%; margin: 0 0 7px 0; }
    }

     

    F12를 눌러 개발자 도구를 활용하시면 요소의 id, class를 확인하실 수 있습니다.

    또는, ctrl + shift + c 를 누르고 해당 요소를 클릭하시면 해당 요소로 이동되어

    편리하게 id, class를 확인하실 수 있습니다.

    고맙습니다.

  • 적용해 보았는데요...

    이미지만 테두리에 꽉차에 보일뿐 사이즈는 작아지지 않으며...

    그로인해 한줄에 3개가 되지 못하고 2개만 계속 됩니다.....ㅜㅜ 

  • #kboard-modern-gallery-list .kboard-list .kboard-list-item { width: 360px; }

    위 코드가 적용되어 있어 width 값이 변하지가 않습니다.

    해당 페이지에서 바로 출력되는 것으로 보아 테마 추가 css나

    다른 영역에서 삽입되어 있는 것으로 추측됩니다.

     

    해당 코드를 삭제해주시거나 답변드린 코드 중 아래 코드를

    #kboard-modern-gallery-list .kboard-list .kboard-list-item { width: 32.45%; margin: 0 1% 7px 0; }
    #kboard-modern-gallery-list .kboard-list .kboard-list-item:nth-child(3n) { margin: 0 0 7px 0; }
    #kboard-modern-gallery-list .kboard-list .kboard-list-item .kboard-item-thumbnail { width: 100%; min-height: 200px; height: auto; }
    
    @media screen and (max-width: 600px){
      #kboard-modern-gallery-list .kboard-list .kboard-list-item { width: 100%; margin: 0 0 7px 0; }
    }

    아래코드로 변경해보시겠어요?

    #kboard-modern-gallery-list .kboard-list .kboard-list-item { width: 32.45% !important; margin: 0 1% 7px 0; }
    #kboard-modern-gallery-list .kboard-list .kboard-list-item:nth-child(3n) { margin: 0 0 7px 0; }
    #kboard-modern-gallery-list .kboard-list .kboard-list-item .kboard-item-thumbnail { width: 100%; min-height: 200px; height: auto; }
    
    @media screen and (max-width: 600px){
      #kboard-modern-gallery-list .kboard-list .kboard-list-item { width: 100% !important; margin: 0 0 7px 0; }
    }
    

    고맙습니다.

  • 잘 해결 되었습니다.....감사합니다.

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