반응형부분 레이아웃 변경 후 링크 영역이 줄어들었습니다.

 

반응형으로 화면을 모바일 사이즈로 줄일 때, 썸네일 크기를 50%씩 해서 두 줄로 넣었습니다.

근데 모바일 사이즈로 줄이면 빨간 동그라미 안의 작은 테두리가 이미지를 전부 덮어야하는데 그러질 않네요.

화면을 키웠을 때는 제대로 됩니다. 어떻게 해야할지 답변 부탁드립니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • HTML/CSS/웹표준 카테고리의 질문인 듯합니다^^

    CSS를 확인해야 하기 때문에 사이트를 보지 않고는 뭐라 답변을 드리는 게 불가능합니다.

    확인 가능한 사이트 주소를 알려주시겠어요?

  • animaxx.net/foled-wear

    입니다.

    동그란 부분 안의 작은 네모칸이 링크 연결되는 부분인데 모바일 사이즈로 줄이면 이미지를 덮지 않아서 클릭이 안되네요.

  • http://animaxx.net/wp-content/plugins/kboard/skin/ocean-gallery/style.css

    위 파일에서 보시면 아래 코드가 있습니다.

    굵게 표시한 부분을 height: 100%; 으로 변경해서 테스트 해보시겠어요?

    @media screen and (max-width: 768px) {
        #kboard-ocean-gallery-editor .kboard-attr-row input[type=text],
        #kboard-ocean-gallery-editor .kboard-attr-row input[type=file],
        #kboard-ocean-gallery-editor .kboard-attr-row input[type=password] { width: 50%; }
        #kboard-ocean-gallery-document .kboard-detail .detail-attr { clear: both; }
        #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li { display: none; }
        #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.first-page,
        #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.last-page { display: inline-block; *display: inline; zoom: 1; }
        #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.prev-page,
        #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.next-page { display: inline-block; *display: inline; zoom: 1; }
        #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.prev-page a,
        #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.next-page a { padding: 6px 18px; }
        #kboard-ocean-gallery-list .kboard-pagination .kboard-pagination-pages li.active { display: inline-block; *display: inline; zoom: 1; }
        #kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail .kboard-gallery-foreground { display:none; position: absolute; left: 0; right: 0 ;top: 0; bottom:0; line-height: 0;/*max-width:300px;padding-bottom:100%;*/}
        #kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail:hover .kboard-gallery-foreground {display:block;}
        #kboard-ocean-gallery-list .kboard-list img { display: block; margin: 0; width: 100%; height:auto ; vertical-align: middle; border-radius: 3px; box-shadow: 0 1px 2px RGBA(0, 0, 0, 0.2); }
        #kboard-ocean-gallery-list .kboard-list .kboard-gallery-item { display: inline-block; *display: inline-block; zoom: 1; padding: 0; width: 47%; box-sizing: content-box; }
        #kboard-ocean-gallery-list .kboard-list .kboard-no-image { line-height: 300px; }
        #kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail { position: relative; float: left; width: 100%; text-align: center; }
        #kboard-ocean-gallery-list .kboard-list .kboard-gallery-title { float: left; padding: 16px 0 50px 0; width: 100%; }
    }

     

    참고로, 크롬등 최신 브라우저의 개발자도구(F12키)를 사용하시면 CSS 속성을 찾고 테스트 하기 편리합니다^^

  • 해봤는데 안되길래 기존 over-foreground이미지 넣는 경로에 투명으로 png 파일 하나 넣어서 해결했습니다.

    기존 호버 이미지를 뺐더니 그랬던것 같네요 ㅠㅋ 답변 감사드립니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요