코스모스팜 스레드
카드갤러리 썸네일 사이즈
카드갤러리를 사용하고 있습니다~ ^^
1. 카드갤러리 썸네일 목록에서
인터넷 창 가로사이즈를 줄이다보면
썸네일 박스(높이 400px) 영역 바깥으로
Date(등록일정보), View(조회수 정보) 가 삐져나가서 표기됩니다
구조 자체가
썸네일 박스 안에 < 썸네일 이미지, 타이틀, 써머리, 등록일자, 조회수 >가 들어가있을 것 같은데..
왜 밖으로 삐져나갈까요?..
어떻게 수정해야 될지..
2. 그리고 썸네일 박스 높이를 400px으로 설정했는데요.
인터넷 창 가로사이즈를 줄여나가다보면
창 사이즈 800? 인가 600? 픽셀에서부터는
썸네일박스 높이가 갑자기 400px 에서 330px 로 바뀌네요.
반응형이라 이렇게 되는걸까요?
그리고 인터넷 창 가로사이즈를 줄이더라도
썸네일박스가 400px에서 갑자기 330px로 변하지 않게
400px로 고정되도록 수정될 수 있을까요?
제가 만들고 있는 카드갤러리 게시판입니다.
http://monggri.com/2-4-%EC%9D%BC%EB%9F%AC%EC%8A%A4%ED%8A%B8-drawingdigital-arcril/
-
스레드봇 (30988 Point)ㆍ2016.06.30 22:58
#kboard-card-gallery-list .kboard-list-item 이쪽에 height을 400px로 주셨군요.
일단 height 값을 지워주세요.
최대 높이를 400px로 주셨기 때문에 그 안에 들어가지 못하는 것들은 밖으로 빠져나오는 모습이 됩니다.
height 값을 지우고
#kboard-card-gallery-list .kboard-list-item 안에 있는 요소들의 높이를 줄이는 방향으로 수정해보세요.
내용을 줄이거나 특정 요소를 지우거나 또는 여백을 줄이는 방향으로요.
아니면 각각 요소들의 height 값을 모두 더한 값을 입력을 해주셔야 합니다.
다시 정리해서 말씀드리면
#kboard-card-gallery-list .kboard-list-item 이쪽에서 정한 height 값보다 안에 있는 요소들의 합산한 height 값이 더 크기 때문입니다.
#kboard-card-gallery-list .kboard-list-item 이쪽의 height 값을 늘리거나
안에 있는 요소들의 내용이나 여백을 줄여서 요소들의 height 값을 줄이세요.
그리고 모바일에서는 height: 330px; 으로 변경 되도록 속성이 설정되어 있습니다.
#kboard-card-gallery-list .kboard-list-item { float: left; margin: 0 0 5px 0; padding: 0; width: 100%; height: 330px; list-style: none; border: 1px solid #e3e3e3; cursor: pointer; background-color: white; }
모바일에서 적용되는 코드는...
@media screen and (max-width: 600px){ 이쪽 영역에 설정된게 모바일에서 적용됩니다. }
http://monggri.com/wp-content/plugins/kboard/skin/card-gallery/style.css
크롬 브라우저의 개발자도구(F12키)를 사용하시면 CSS 속성을 쉽게 찾고 테스트 해보실 수 있습니다^^;
-
몽그리 (24 Point)ㆍ2016.07.01 15:41
설명해주신대로 잘 수정하였습니다.
감사드립니다. ~ ^^
KBoard 감사
