css 베스트위젯상하단이미지작업

Posted 2021-05-13

<!-- 베스트 리뷰 관련 css 시작 -->
<style>
  .crema_br_img { text-align: center; }
</style>
<!-- 베스트 리뷰 관련 css 끝 -->

// 베스트 리뷰 시작
document.write("<div class='crema_br_img'><img src=''/></div>"); /* 베스트 리뷰 상단 이미지입니다. src= 다음에 나오는 작은따옴표 안쪽에 수정할 이미지 url을 적어주세요 */
document.write("<div class='crema-reviews' data-widget-id=''></div>");
document.write("<div class='crema_br_img'><img src=''/></div>"); /* 베스트 리뷰 하단 이미지입니다. src= 다음에 나오는 작은따옴표 안쪽에 수정할 이미지 url을 적어주세요 */
// 베스트 리뷰 끝

.reviews_index__head {
  display: none;
}
.reviews_index__body {
  border-bottom: 0;
}
.reviews_index__foot {
  display: none;
}
.reviews_index_gallery_review {
  margin: 0 43px; /* 위젯 좌우 여백 */
}
.reviews_index--gallery .reviews_index__reviews {
  width: 909px; /* 위젯 전체 가로 사이즈 */
}

<!-- 베스트 리뷰 관련 css 시작 -->
<style>
  .crema_br_img img{ width: 100%; }
</style>
<!-- 베스트 리뷰 관련 css 끝 -->

// 베스트 리뷰 시작
document.write("<div class='crema_br_img'><img src=''/></div>"); /* 베스트 리뷰 상단 이미지입니다. src= 다음에 나오는 작은따옴표 안쪽에 수정할 이미지 url을 적어주세요 */
document.write("<div class='crema-reviews' data-widget-id=''></div>");
document.write("<div class='crema_br_img'><img src=''/></div>"); /* 베스트 리뷰 하단 이미지입니다. src= 다음에 나오는 작은따옴표 안쪽에 수정할 이미지 url을 적어주세요 */
// 베스트 리뷰 끝

.reviews_index__head {
  display: none;
}
.reviews_index__footer {
  display: none;
}
/* 행 높이 고정 */
.reviews_index_gallery_review__section--photo {
  /* 사진 크기를 정방형으로 맞추기 위해 */
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
.reviews_index_gallery_review__image {
  /* 사진의 세로 중앙 정렬을 맞추기 위해 */
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

/* 3열 */
.reviews_index_gallery_review__author_name,
.reviews_index_gallery_review__created_at {
  min-height: 18px;
}

@media (max-width: 415px) {
  .reviews_index_gallery__reviews--3cols .reviews_index_gallery_review__display_score,
  .reviews_index_gallery__reviews--3cols .reviews_index_gallery_review__reviews_count {
    display: block;
  }
  .reviews_index_gallery__reviews--3cols .reviews_index_gallery_review__review_product {
    height: 40px !important;
  }
  .reviews_index_gallery_review__author_name {
    float: none;
  }
}

@media (max-width: 320px) {
  .reviews_index_gallery__reviews--3cols .reviews_index_gallery_review__review_product {
    height: 26px !important;
  }
  .reviews_index_gallery_review__author_name {
    float: none;
  }
}