css 베스트리뷰위젯（배경이미지사용）

Posted 2021-05-13

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

<!-- 베스트 리뷰 관련 css 시작 -->
<style>
  .best_review {
    width: 1000px;
    position: relative;
    margin: 0 auto;
    text-align: center;
    display: none;
  }
  .best_review__bg { width: 100%; }
  .best_review__widget {
    width: 1000px;
    position: absolute;
    top: 101px;
    left: 0;
  }
</style>
<!-- 베스트 리뷰 관련 css 끝 -->

.reviews_index__head { display: none; }
.reviews_index__foot { display: none; }
.reviews_index__body { border-bottom: 0; }
.reviews_index_gallery_review { margin: 0 40px; }
.reviews_index--gallery .reviews_index__reviews { width: 891px; }
.reviews_index { padding-bottom: 0; }

.reviews_index__head { display: none; }
.reviews_index__footer { display: none; }
.reviews_index__body { border-bottom: 0; }

/* 행 높이 고정 */
.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;
  }
}