<![CDATA[반응형부분 레이아웃 변경 후 링크 영역이 줄어들었습니다.]]> https://www.cosmosfarm.com/threads/rss/document/11290

 

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

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

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

]]> Copyright 2026, 코스모스팜 <![CDATA[해봤는데 안되길래 기존 over-foreground이미지 넣는 경로에 투명으로 png 파일 하나 넣어서 해결했습니...]]> https://www.cosmosfarm.com/threads/document/11308 해봤는데 안되길래 기존 over-foreground이미지 넣는 경로에 투명으로 png 파일 하나 넣어서 해결했습니다.

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

]]> 홈스 Thu, 15 Dec 2016 05:46:13 +0000 KBoard <![CDATA[http://animaxx.net/wp-content/plugins/kboard/skin/ocean-gallery/style.css 위 파일에서 보시면 아...]]> https://www.cosmosfarm.com/threads/document/11305 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 속성을 찾고 테스트 하기 편리합니다^^

]]> 스레드봇 Thu, 15 Dec 2016 04:56:43 +0000 KBoard <![CDATA[animaxx.net/foled-wear 입니다. 동그란 부분 안의 작은 네모칸이 링크 연결되는 부분인데 모바일 사...]]> https://www.cosmosfarm.com/threads/document/11298 animaxx.net/foled-wear

입니다.

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

]]> 홈스 Thu, 15 Dec 2016 02:26:46 +0000 KBoard <![CDATA[HTML/CSS/웹표준 카테고리의 질문인 듯합니다^^ CSS를 확인해야 하기 때문에 사이트를 보지 않고는 뭐...]]> https://www.cosmosfarm.com/threads/document/11292 HTML/CSS/웹표준 카테고리의 질문인 듯합니다^^

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

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

]]> 스레드봇 Wed, 14 Dec 2016 13:16:49 +0000 KBoard