swcheon of CREMA Publishing Team
7/20/2018 - 1:41 AM

PC 상품 프리뷰 위젯 반응형 CSS

width가 좁아졌을 때 사진이 숨겨지는 기능

custom_widget.css
content_copyfile_download
.photo_thumbnail_box {
  padding: 5px 0;
}
.photo_thumbnail_box__title {
  padding: 5px 0 4px;
  text-align: center;
}
.photo_thumbnail_box__photos {
  margin: 0 auto;
  padding: 5px;
  height: 93px; /* 88px + 5px */
  overflow: hidden;
  text-align: center;
}
.photo_thumbnail_box__photo {
  width: 88px;
  height: 88px;
  margin-left: 8px;
  margin-bottom: 0;
  margin-top: 5px;
  overflow: hidden;
  float: none;
  display: inline-block;
}
.photo_thumbnail_box__photo:first-child {
  margin-left: 0;
}
.photo_thumbnail_box__photo img {
  width: 88px;
  height: 88px;
}
.photo_thumbnail_box__link {
  width: 88px;
  height: 88px;
  text-align: left;
}
body #content {
  padding: 1px;
}
.photo_thumbnail_box__video--portrait {
  width: 88px;
}
.photo_thumbnail_box__video--landscape {
  height: 88px;
}