Re: Making Custom Code Mobile Friendly

Alllways · ‎11-05-2023

Hello,

I have been working on making a custom reviews section on my product page, i have been able to make it PC friendly, but i cant figure out how to make it mobile friendly.

Example website of how i want it: https://anna-lea.nl/products/casual-sweatshirt

My website: https://aliva-amsterdam.nl/products/smukke-anti-cellulite-leggings

I will also add the code i am using. and a picture of what section I am talking about

Thanks in advance 🙂

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .custom-reviews.static .below-reviews {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    
    .custom-reviews.static .reviewsItems {
      width: calc(33% - 10px);
      margin-bottom: 0;
    }
    
    h2.reviw_title {
      margin: 8px 0;
    }
    
    .blw-data p {
      margin: 0;
      font-size: 14px;
      line-height: 23px;
    }
    
    .blw-data i.fa.fa-star {
      color: #01aa0a;
    }
    
    .rating--area {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .top-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .rating-text {
      text-align: right;
      font-size: 16px;
      color: #01aa0a;
    }
    
    span.customSlArrow {
      width: 45px;
      height: 45px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 100%;
      cursor: pointer;
    }
    
    .top-head h3 span {
      color: #01aa0a;
    }
    
    .top-head h3 {
      text-align: center;
      font-size: 25px;
      line-height: 27px;
    }
    
    span.customSlArrow.leftArrowCR {
      transform: rotate(90deg);
    }
    
    span.customSlArrow.righttArrowCR {
      transform: rotate(-90deg);
    }
    
    .revie-parent {
      background: #fceadc;
      padding: 17px 38px;
    }
    
    .footerReviews {
      margin-top: 22px;
    }
    
    .blw-data {
      background: #fff;
      padding: 12px 13px;
    }
    
    .custom-reviews.static .slick-list {
      margin: 0 -7px;
    }
    
    .top-head.centr {
      justify-content: center;
    }
    
    @media (max-width: 767px) {
      .top-head h3 {
        text-align: center;
        font-size: 18px;
        line-height: 23px;
      }
      .custom-reviews.static .slick-list {
        padding: 0 20% 0 0 !important;
      }
      span.customSlArrow {
        display: none !important;
      }
      .below-reviews .slick-prev:before,
      .below-reviews .slick-next:before {
        color: #01aa0a;
      }
    }
  </style>
</head>
<body>
  <div class="custom-reviews static">
    <div class="page-width">
      <div class="revie-parent">
        <div class="top-head centr">
          <h3>Vertrouwd door <br> <span>350 000+</span> klanten.</h3>
        </div>
        <div class="below-reviews">
          <div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
            <div class="blw-data">
              <div class="rating--area">
                <div class="ratnmbr">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <div class="abtrate">Excellent</div>
              </div>
              <h2 class="reviw_title"></h2>
              <p>Fantastisch! De aankomst van de tweede bestelling, ik wacht weer met spanning! Kwaliteitsproducten en uitstekende service. Ik beveel het zeker aan!</p>
              <div class="footerReviews">
                <span>Review by <b>Emma</b></span>
              </div>
            </div>
          </div>
          <div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
            <div class="blw-data">
              <div class="rating--area">
                <div class="ratnmbr">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <div class="abtrate">Excellent</div>
              </div>
              <h2 class="reviw_title"></h2>
              <p>Absoluut perfecte maataanduiding en de pasvorm is fantastisch! Ik ben oprecht dankbaar. Bedankt voor de juiste levering!</p>
              <div class="footerReviews">
                <span>Review by <b>Floris</b></span>
              </div>
            </div>
          </div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Deze webshop heeft me echt verbaasd. Snelle verzending en hoogwaardige producten. Ik zal hier zeker weer winkelen!</p>
    <div class="footerReviews">
      <span>Review door <b>Lisa</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    
    <p>Deze webshop heeft een geweldige selectie en uitstekende klantenservice. Ik ben zeer tevreden met mijn aankoop.</p>
    <div class="footerReviews">
      <span>Review door <b>John</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Geweldige ervaring! Deze webshop heeft een uitstekende klantenservice en een ruime keuze aan producten. Mijn bestelling kwam snel aan en was in perfecte staat. Ik ben erg tevreden en zal zeker weer bij hen winkelen!</p>
    <div class="footerReviews">
      <span>Review door <b>Karen</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Deze webshop is mijn favoriet! De website is gebruiksvriendelijk, het assortiment is indrukwekkend en de verzending is altijd op tijd. Ik ben een loyale klant geworden en heb geen reden om ergens anders te winkelen.</p>
    <div class="footerReviews">
      <span>Review door <b>Sophie</b></span>
    </div>
  </div>
</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Dan-From-Ryviu · ‎11-05-2023

Hi @Alllways

Please update your code to this.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .custom-reviews.static .below-reviews {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    
    .custom-reviews.static .reviewsItems {
      width: calc(33% - 10px);
      margin-bottom: 0;
    }
   @media (max-width: 767px)  {
   .custom-reviews.static .reviewsItems {
    width: 100%;
    }
   } 
    h2.reviw_title {
      margin: 8px 0;
    }
    
    .blw-data p {
      margin: 0;
      font-size: 14px;
      line-height: 23px;
    }
    
    .blw-data i.fa.fa-star {
      color: #01aa0a;
    }
    
    .rating--area {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .top-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .rating-text {
      text-align: right;
      font-size: 16px;
      color: #01aa0a;
    }
    
    span.customSlArrow {
      width: 45px;
      height: 45px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 100%;
      cursor: pointer;
    }
    
    .top-head h3 span {
      color: #01aa0a;
    }
    
    .top-head h3 {
      text-align: center;
      font-size: 25px;
      line-height: 27px;
    }
    
    span.customSlArrow.leftArrowCR {
      transform: rotate(90deg);
    }
    
    span.customSlArrow.righttArrowCR {
      transform: rotate(-90deg);
    }
    
    .revie-parent {
      background: #fceadc;
      padding: 17px 38px;
    }
    
    .footerReviews {
      margin-top: 22px;
    }
    
    .blw-data {
      background: #fff;
      padding: 12px 13px;
    }
    
    .custom-reviews.static .slick-list {
      margin: 0 -7px;
    }
    
    .top-head.centr {
      justify-content: center;
    }
    
    @media (max-width: 767px) {
      .top-head h3 {
        text-align: center;
        font-size: 18px;
        line-height: 23px;
      }
      .custom-reviews.static .slick-list {
        padding: 0 20% 0 0 !important;
      }
      span.customSlArrow {
        display: none !important;
      }
      .below-reviews .slick-prev:before,
      .below-reviews .slick-next:before {
        color: #01aa0a;
      }
    }
  </style>
</head>
<body>
  <div class="custom-reviews static">
    <div class="page-width">
      <div class="revie-parent">
        <div class="top-head centr">
          <h3>Vertrouwd door <br> <span>350 000+</span> klanten.</h3>
        </div>
        <div class="below-reviews">
          <div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
            <div class="blw-data">
              <div class="rating--area">
                <div class="ratnmbr">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <div class="abtrate">Excellent</div>
              </div>
              <h2 class="reviw_title"></h2>
              <p>Fantastisch! De aankomst van de tweede bestelling, ik wacht weer met spanning! Kwaliteitsproducten en uitstekende service. Ik beveel het zeker aan!</p>
              <div class="footerReviews">
                <span>Review by <b>Emma</b></span>
              </div>
            </div>
          </div>
          <div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
            <div class="blw-data">
              <div class="rating--area">
                <div class="ratnmbr">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <div class="abtrate">Excellent</div>
              </div>
              <h2 class="reviw_title"></h2>
              <p>Absoluut perfecte maataanduiding en de pasvorm is fantastisch! Ik ben oprecht dankbaar. Bedankt voor de juiste levering!</p>
              <div class="footerReviews">
                <span>Review by <b>Floris</b></span>
              </div>
            </div>
          </div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Deze webshop heeft me echt verbaasd. Snelle verzending en hoogwaardige producten. Ik zal hier zeker weer winkelen!</p>
    <div class="footerReviews">
      <span>Review door <b>Lisa</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    
    <p>Deze webshop heeft een geweldige selectie en uitstekende klantenservice. Ik ben zeer tevreden met mijn aankoop.</p>
    <div class="footerReviews">
      <span>Review door <b>John</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Geweldige ervaring! Deze webshop heeft een uitstekende klantenservice en een ruime keuze aan producten. Mijn bestelling kwam snel aan en was in perfecte staat. Ik ben erg tevreden en zal zeker weer bij hen winkelen!</p>
    <div class="footerReviews">
      <span>Review door <b>Karen</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Deze webshop is mijn favoriet! De website is gebruiksvriendelijk, het assortiment is indrukwekkend en de verzending is altijd op tijd. Ik ben een loyale klant geworden en heb geen reden om ergens anders te winkelen.</p>
    <div class="footerReviews">
      <span>Review door <b>Sophie</b></span>
    </div>
  </div>
</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Alllways · ‎11-05-2023

Thank you!

Is it possible to make it swipable on phones, see example picture

Dan-From-Ryviu · ‎11-05-2023

Hi @Alllways

You can try to update code like this and check if it workings

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .custom-reviews.static .below-reviews {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    
    .custom-reviews.static .reviewsItems {
      width: calc(33% - 10px);
      margin-bottom: 0;
    }
   @media (max-width: 767px)  {
   .custom-reviews.static .reviewsItems {
    width: 100%;
    }
   } 
    h2.reviw_title {
      margin: 8px 0;
    }
    
    .blw-data p {
      margin: 0;
      font-size: 14px;
      line-height: 23px;
    }
    
    .blw-data i.fa.fa-star {
      color: #01aa0a;
    }
    
    .rating--area {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .top-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .rating-text {
      text-align: right;
      font-size: 16px;
      color: #01aa0a;
    }
    
    span.customSlArrow {
      width: 45px;
      height: 45px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 100%;
      cursor: pointer;
    }
    
    .top-head h3 span {
      color: #01aa0a;
    }
    
    .top-head h3 {
      text-align: center;
      font-size: 25px;
      line-height: 27px;
    }
    
    span.customSlArrow.leftArrowCR {
      transform: rotate(90deg);
    }
    
    span.customSlArrow.righttArrowCR {
      transform: rotate(-90deg);
    }
    
    .revie-parent {
      background: #fceadc;
      padding: 17px 38px;
    }
    
    .footerReviews {
      margin-top: 22px;
    }
    
    .blw-data {
      background: #fff;
      padding: 12px 13px;
    }
    
    .custom-reviews.static .slick-list {
      margin: 0 -7px;
    }
    
    .top-head.centr {
      justify-content: center;
    }
    
    @media (max-width: 767px) {
      .top-head h3 {
        text-align: center;
        font-size: 18px;
        line-height: 23px;
      }
      .custom-reviews.static .slick-list {
        padding: 0 20% 0 0 !important;
      }
      span.customSlArrow {
        display: none !important;
      }
      .below-reviews .slick-prev:before,
      .below-reviews .slick-next:before {
        color: #01aa0a;
      }
    }
  </style>
</head>
<body>
  <div class="custom-reviews static">
    <div class="page-width">
      <div class="revie-parent">
        <div class="top-head centr">
          <h3>Vertrouwd door <br> <span>350 000+</span> klanten.</h3>
        </div>
        <div class="below-reviews">
          <div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
            <div class="blw-data">
              <div class="rating--area">
                <div class="ratnmbr">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <div class="abtrate">Excellent</div>
              </div>
              <h2 class="reviw_title"></h2>
              <p>Fantastisch! De aankomst van de tweede bestelling, ik wacht weer met spanning! Kwaliteitsproducten en uitstekende service. Ik beveel het zeker aan!</p>
              <div class="footerReviews">
                <span>Review by <b>Emma</b></span>
              </div>
            </div>
          </div>
          <div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
            <div class="blw-data">
              <div class="rating--area">
                <div class="ratnmbr">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <div class="abtrate">Excellent</div>
              </div>
              <h2 class="reviw_title"></h2>
              <p>Absoluut perfecte maataanduiding en de pasvorm is fantastisch! Ik ben oprecht dankbaar. Bedankt voor de juiste levering!</p>
              <div class="footerReviews">
                <span>Review by <b>Floris</b></span>
              </div>
            </div>
          </div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Deze webshop heeft me echt verbaasd. Snelle verzending en hoogwaardige producten. Ik zal hier zeker weer winkelen!</p>
    <div class="footerReviews">
      <span>Review door <b>Lisa</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    
    <p>Deze webshop heeft een geweldige selectie en uitstekende klantenservice. Ik ben zeer tevreden met mijn aankoop.</p>
    <div class="footerReviews">
      <span>Review door <b>John</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Geweldige ervaring! Deze webshop heeft een uitstekende klantenservice en een ruime keuze aan producten. Mijn bestelling kwam snel aan en was in perfecte staat. Ik ben erg tevreden en zal zeker weer bij hen winkelen!</p>
    <div class="footerReviews">
      <span>Review door <b>Karen</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Deze webshop is mijn favoriet! De website is gebruiksvriendelijk, het assortiment is indrukwekkend en de verzending is altijd op tijd. Ik ben een loyale klant geworden en heb geen reden om ergens anders te winkelen.</p>
    <div class="footerReviews">
      <span>Review door <b>Sophie</b></span>
    </div>
  </div>
</div>
        </div>
      </div>
    </div>
  </div>


      window.cartStrings = {
        error: `Er is een fout opgetreden bij het bijwerken van je winkelwagen. Probeer het opnieuw.`,
        quantityError: `Je kunt maar [quantity] van dit artikel toevoegen aan je winkelwagen.`
      }

      window.variantStrings = {
        addToCart: `Aan winkelwagen toevoegen`,
        soldOut: `Uitverkocht`,
        unavailable: `Niet beschikbaar`,
      }

      window.accessibilityStrings = {
        imageAvailable: `Afbeelding [index] is nu beschikbaar in gallery-weergave`,
        shareSuccess: `Link gekopieerd naar klembord`,
        pauseSlideshow: `Diavoorstelling pauzeren`,
        playSlideshow: `Diavoorstelling afspelen`,
      }
    </script><!-- "snippets/revy-bundle-script.liquid" was not rendered, the associated app was uninstalled -->
  



    <script
  src="https://code.jquery.com/jquery-3.6.1.min.js"
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>

  $('.custom-reviews.static .below-reviews').slick({

  slidesToShow: 3,
  responsive: [
    {
            breakpoint: 9999999,
            settings: "unslick"
        }, {
      breakpoint: 768,
      settings: {
         dots:false,
  infinite: true,
  speed: 300,
   
   arrows: true,
        slidesToShow: 1
      }
    }
  ]
});
$('.below-reviews.slidesslidr').slick({
 dots:false,
  infinite: true,
  speed: 300,
   arrows: false,
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
   arrows: true,
        slidesToShow: 1
      }
    }
  ]
});

  $("body").on("click","span.customSlArrow.leftArrowCR", function(){


  $('.below-reviews').slick('slickPrev');
});
    $("body").on("click","span.customSlArrow.righttArrowCR", function(){


  
  $('.below-reviews').slick('slickNext');
});
$('.responsive').slick({
  centerMode: true,
  autoplay:true,
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  centerPadding: '0px',
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '25px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '20px',
        slidesToShow: 1
      }
    }
  ]
});
  $("body").on("click",".slider.slider--mobile .slider__slide img", function(){
  console.log("success");
});
 function getimage(){
   setTimeout(function(){
   var inds=$('.topsldis li').find('button[aria-current="true"]').parent().attr('inds');
  
    $('ul.mob---slides li').removeClass('active');
     $('ul.mob---slides li[inds='+inds+']').addClass('active')
     },10)
 }
  $('ul.mob---slides li').click(function(){
    var inds=$(this).attr('inds');
     $('ul.mob---slides li').removeClass('active');
    $(this).addClass('active')
    $('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+']')[0].click();
     $('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+'] button').trigger('click')
  })
</script>
   <script>
     $('a.cstm-tbn').click(function(e){
       e.preventDefault();
       $('.product-form__buttons button.product-form__submit')[0].click();
     })
      function randomInt(min, max) {
         min = Math.ceil(min);
         max = Math.floor(max);
         return Math.floor(Math.random() * (max - min)) + min;
      }
    setInterval(function(){
      $('.getviditors').text(randomInt(40,70))
    },10000)
     $('.getviditors').text(randomInt(40,70))
   </script>


</body>
</html>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Alllways · ‎11-05-2023

It doesnt work 😞 I receive an error message, see pictures

Dan-From-Ryviu · ‎11-05-2023

My mistake, please update code

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .custom-reviews.static .below-reviews {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    
    .custom-reviews.static .reviewsItems {
      width: calc(33% - 10px);
      margin-bottom: 0;
    }
   @media (max-width: 767px)  {
   .custom-reviews.static .reviewsItems {
    width: 100%;
    }
   } 
    h2.reviw_title {
      margin: 8px 0;
    }
    
    .blw-data p {
      margin: 0;
      font-size: 14px;
      line-height: 23px;
    }
    
    .blw-data i.fa.fa-star {
      color: #01aa0a;
    }
    
    .rating--area {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .top-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .rating-text {
      text-align: right;
      font-size: 16px;
      color: #01aa0a;
    }
    
    span.customSlArrow {
      width: 45px;
      height: 45px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 100%;
      cursor: pointer;
    }
    
    .top-head h3 span {
      color: #01aa0a;
    }
    
    .top-head h3 {
      text-align: center;
      font-size: 25px;
      line-height: 27px;
    }
    
    span.customSlArrow.leftArrowCR {
      transform: rotate(90deg);
    }
    
    span.customSlArrow.righttArrowCR {
      transform: rotate(-90deg);
    }
    
    .revie-parent {
      background: #fceadc;
      padding: 17px 38px;
    }
    
    .footerReviews {
      margin-top: 22px;
    }
    
    .blw-data {
      background: #fff;
      padding: 12px 13px;
    }
    
    .custom-reviews.static .slick-list {
      margin: 0 -7px;
    }
    
    .top-head.centr {
      justify-content: center;
    }
    
    @media (max-width: 767px) {
      .top-head h3 {
        text-align: center;
        font-size: 18px;
        line-height: 23px;
      }
      .custom-reviews.static .slick-list {
        padding: 0 20% 0 0 !important;
      }
      span.customSlArrow {
        display: none !important;
      }
      .below-reviews .slick-prev:before,
      .below-reviews .slick-next:before {
        color: #01aa0a;
      }
    }
  </style>
</head>
<body>
  <div class="custom-reviews static">
    <div class="page-width">
      <div class="revie-parent">
        <div class="top-head centr">
          <h3>Vertrouwd door <br> <span>350 000+</span> klanten.</h3>
        </div>
        <div class="below-reviews">
          <div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
            <div class="blw-data">
              <div class="rating--area">
                <div class="ratnmbr">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <div class="abtrate">Excellent</div>
              </div>
              <h2 class="reviw_title"></h2>
              <p>Fantastisch! De aankomst van de tweede bestelling, ik wacht weer met spanning! Kwaliteitsproducten en uitstekende service. Ik beveel het zeker aan!</p>
              <div class="footerReviews">
                <span>Review by <b>Emma</b></span>
              </div>
            </div>
          </div>
          <div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
            <div class="blw-data">
              <div class="rating--area">
                <div class="ratnmbr">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <div class="abtrate">Excellent</div>
              </div>
              <h2 class="reviw_title"></h2>
              <p>Absoluut perfecte maataanduiding en de pasvorm is fantastisch! Ik ben oprecht dankbaar. Bedankt voor de juiste levering!</p>
              <div class="footerReviews">
                <span>Review by <b>Floris</b></span>
              </div>
            </div>
          </div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Deze webshop heeft me echt verbaasd. Snelle verzending en hoogwaardige producten. Ik zal hier zeker weer winkelen!</p>
    <div class="footerReviews">
      <span>Review door <b>Lisa</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    
    <p>Deze webshop heeft een geweldige selectie en uitstekende klantenservice. Ik ben zeer tevreden met mijn aankoop.</p>
    <div class="footerReviews">
      <span>Review door <b>John</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Geweldige ervaring! Deze webshop heeft een uitstekende klantenservice en een ruime keuze aan producten. Mijn bestelling kwam snel aan en was in perfecte staat. Ik ben erg tevreden en zal zeker weer bij hen winkelen!</p>
    <div class="footerReviews">
      <span>Review door <b>Karen</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Deze webshop is mijn favoriet! De website is gebruiksvriendelijk, het assortiment is indrukwekkend en de verzending is altijd op tijd. Ik ben een loyale klant geworden en heb geen reden om ergens anders te winkelen.</p>
    <div class="footerReviews">
      <span>Review door <b>Sophie</b></span>
    </div>
  </div>
</div>
        </div>
      </div>
    </div>
  </div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>

  $('.custom-reviews.static .below-reviews').slick({

  slidesToShow: 3,
  responsive: [
    {
            breakpoint: 9999999,
            settings: "unslick"
        }, {
      breakpoint: 768,
      settings: {
         dots:false,
  infinite: true,
  speed: 300,
   
   arrows: true,
        slidesToShow: 1
      }
    }
  ]
});
$('.below-reviews.slidesslidr').slick({
 dots:false,
  infinite: true,
  speed: 300,
   arrows: false,
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
   arrows: true,
        slidesToShow: 1
      }
    }
  ]
});

  $("body").on("click","span.customSlArrow.leftArrowCR", function(){


  $('.below-reviews').slick('slickPrev');
});
    $("body").on("click","span.customSlArrow.righttArrowCR", function(){


  
  $('.below-reviews').slick('slickNext');
});
$('.responsive').slick({
  centerMode: true,
  autoplay:true,
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  centerPadding: '0px',
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '25px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '20px',
        slidesToShow: 1
      }
    }
  ]
});
  $("body").on("click",".slider.slider--mobile .slider__slide img", function(){
  console.log("success");
});
 function getimage(){
   setTimeout(function(){
   var inds=$('.topsldis li').find('button[aria-current="true"]').parent().attr('inds');
  
    $('ul.mob---slides li').removeClass('active');
     $('ul.mob---slides li[inds='+inds+']').addClass('active')
     },10)
 }
  $('ul.mob---slides li').click(function(){
    var inds=$(this).attr('inds');
     $('ul.mob---slides li').removeClass('active');
    $(this).addClass('active')
    $('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+']')[0].click();
     $('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+'] button').trigger('click')
  })
</script>
   <script>
     $('a.cstm-tbn').click(function(e){
       e.preventDefault();
       $('.product-form__buttons button.product-form__submit')[0].click();
     })
      function randomInt(min, max) {
         min = Math.ceil(min);
         max = Math.floor(max);
         return Math.floor(Math.random() * (max - min)) + min;
      }
    setInterval(function(){
      $('.getviditors').text(randomInt(40,70))
    },10000)
     $('.getviditors').text(randomInt(40,70))
   </script>


</body>
</html>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Alllways · ‎11-05-2023

Still doesnt work as a slider on phone

Dan-From-Ryviu · ‎11-05-2023

Code updated

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .custom-reviews.static .below-reviews {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    
    .custom-reviews.static .reviewsItems {
      width: calc(33% - 10px);
      margin-bottom: 0;
    }
   @media (max-width: 767px)  {
   .custom-reviews.static .reviewsItems {
    width: 100%;
    }
   } 
    h2.reviw_title {
      margin: 8px 0;
    }
    
    .blw-data p {
      margin: 0;
      font-size: 14px;
      line-height: 23px;
    }
    
    .blw-data i.fa.fa-star {
      color: #01aa0a;
    }
    
    .rating--area {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .top-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .rating-text {
      text-align: right;
      font-size: 16px;
      color: #01aa0a;
    }
    
    span.customSlArrow {
      width: 45px;
      height: 45px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 100%;
      cursor: pointer;
    }
    
    .top-head h3 span {
      color: #01aa0a;
    }
    
    .top-head h3 {
      text-align: center;
      font-size: 25px;
      line-height: 27px;
    }
    
    span.customSlArrow.leftArrowCR {
      transform: rotate(90deg);
    }
    
    span.customSlArrow.righttArrowCR {
      transform: rotate(-90deg);
    }
    
    .revie-parent {
      background: #fceadc;
      padding: 17px 38px;
    }
    
    .footerReviews {
      margin-top: 22px;
    }
    
    .blw-data {
      background: #fff;
      padding: 12px 13px;
    }
    
    .custom-reviews.static .slick-list {
      margin: 0 -7px;
    }
    
    .top-head.centr {
      justify-content: center;
    }
    
    @media (max-width: 767px) {
      .top-head h3 {
        text-align: center;
        font-size: 18px;
        line-height: 23px;
      }
      .custom-reviews.static .slick-list {
        padding: 0 20% 0 0 !important;
      }
      span.customSlArrow {
        display: none !important;
      }
      .below-reviews .slick-prev:before,
      .below-reviews .slick-next:before {
        color: #01aa0a;
      }
    }
  </style>
</head>
<body>
  <div class="custom-reviews static">
    <div class="page-width">
      <div class="revie-parent">
        <div class="top-head centr">
          <h3>Vertrouwd door <br> <span>350 000+</span> klanten.</h3>
        </div>
        <div class="below-reviews">
          <div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
            <div class="blw-data">
              <div class="rating--area">
                <div class="ratnmbr">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <div class="abtrate">Excellent</div>
              </div>
              <h2 class="reviw_title"></h2>
              <p>Fantastisch! De aankomst van de tweede bestelling, ik wacht weer met spanning! Kwaliteitsproducten en uitstekende service. Ik beveel het zeker aan!</p>
              <div class="footerReviews">
                <span>Review by <b>Emma</b></span>
              </div>
            </div>
          </div>
          <div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
            <div class="blw-data">
              <div class="rating--area">
                <div class="ratnmbr">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <div class="abtrate">Excellent</div>
              </div>
              <h2 class="reviw_title"></h2>
              <p>Absoluut perfecte maataanduiding en de pasvorm is fantastisch! Ik ben oprecht dankbaar. Bedankt voor de juiste levering!</p>
              <div class="footerReviews">
                <span>Review by <b>Floris</b></span>
              </div>
            </div>
          </div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Deze webshop heeft me echt verbaasd. Snelle verzending en hoogwaardige producten. Ik zal hier zeker weer winkelen!</p>
    <div class="footerReviews">
      <span>Review door <b>Lisa</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    
    <p>Deze webshop heeft een geweldige selectie en uitstekende klantenservice. Ik ben zeer tevreden met mijn aankoop.</p>
    <div class="footerReviews">
      <span>Review door <b>John</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Geweldige ervaring! Deze webshop heeft een uitstekende klantenservice en een ruime keuze aan producten. Mijn bestelling kwam snel aan en was in perfecte staat. Ik ben erg tevreden en zal zeker weer bij hen winkelen!</p>
    <div class="footerReviews">
      <span>Review door <b>Karen</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Deze webshop is mijn favoriet! De website is gebruiksvriendelijk, het assortiment is indrukwekkend en de verzending is altijd op tijd. Ik ben een loyale klant geworden en heb geen reden om ergens anders te winkelen.</p>
    <div class="footerReviews">
      <span>Review door <b>Sophie</b></span>
    </div>
  </div>
</div>
        </div>
      </div>
    </div>
  </div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>

  $('.custom-reviews.static .below-reviews').slick({

  slidesToShow: 3,
  responsive: [
    {
            breakpoint: 9999999,
            settings: "unslick"
        }, {
      breakpoint: 768,
      settings: {
         dots:false,
  infinite: true,
  speed: 300,
   
   arrows: true,
        slidesToShow: 1
      }
    }
  ]
});
$('.below-reviews.slidesslidr').slick({
 dots:false,
  infinite: true,
  speed: 300,
   arrows: false,
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
   arrows: true,
        slidesToShow: 1
      }
    }
  ]
});

  $("body").on("click","span.customSlArrow.leftArrowCR", function(){


  $('.below-reviews').slick('slickPrev');
});
    $("body").on("click","span.customSlArrow.righttArrowCR", function(){


  
  $('.below-reviews').slick('slickNext');
});
$('.responsive').slick({
  centerMode: true,
  autoplay:true,
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  centerPadding: '0px',
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '25px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '20px',
        slidesToShow: 1
      }
    }
  ]
});
  $("body").on("click",".slider.slider--mobile .slider__slide img", function(){
  console.log("success");
});
 function getimage(){
   setTimeout(function(){
   var inds=$('.topsldis li').find('button[aria-current="true"]').parent().attr('inds');
  
    $('ul.mob---slides li').removeClass('active');
     $('ul.mob---slides li[inds='+inds+']').addClass('active')
     },10)
 }
  $('ul.mob---slides li').click(function(){
    var inds=$(this).attr('inds');
     $('ul.mob---slides li').removeClass('active');
    $(this).addClass('active')
    $('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+']')[0].click();
     $('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+'] button').trigger('click')
  })
</script>
   <script>
     $('a.cstm-tbn').click(function(e){
       e.preventDefault();
       $('.product-form__buttons button.product-form__submit')[0].click();
     })
      function randomInt(min, max) {
         min = Math.ceil(min);
         max = Math.floor(max);
         return Math.floor(Math.random() * (max - min)) + min;
      }
    setInterval(function(){
      $('.getviditors').text(randomInt(40,70))
    },10000)
     $('.getviditors').text(randomInt(40,70))
   </script>


</body>
</html>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Alllways · ‎11-05-2023

On my phone it looks like this now...

Example website of how i want it: https://anna-lea.nl/products/casual-sweatshirt

Dan-From-Ryviu · ‎11-05-2023

Please remove css code that I provide at the first time and check again

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Alllways · ‎11-05-2023

I already removed the CSS from before. And i just copied and pasted the last CSS you send me but it doesnt work...

Dan-From-Ryviu · ‎11-05-2023

Hi @Alllways

Sorry for the late reply, I must have tried the code directly on my side, and here is the final code updated

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .custom-reviews.static .below-reviews {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    } 
.custom-reviews.static .below-reviews .slick-arrow { 
display: none !important; }
    @media (min-width: 768px) {
    .custom-reviews.static .reviewsItems {
      width: calc(33% - 10px);
      margin-bottom: 0;
    }
	}
    h2.reviw_title {
      margin: 8px 0;
    }
    
    .blw-data p {
      margin: 0;
      font-size: 14px;
      line-height: 23px;
    }
    
    .blw-data i.fa.fa-star {
      color: #01aa0a;
    }
    
    .rating--area {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .top-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .rating-text {
      text-align: right;
      font-size: 16px;
      color: #01aa0a;
    }
    
    span.customSlArrow {
      width: 45px;
      height: 45px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 100%;
      cursor: pointer;
    }
    
    .top-head h3 span {
      color: #01aa0a;
    }
    
    .top-head h3 {
      text-align: center;
      font-size: 25px;
      line-height: 27px;
    }
    
    span.customSlArrow.leftArrowCR {
      transform: rotate(90deg);
    }
    
    span.customSlArrow.righttArrowCR {
      transform: rotate(-90deg);
    }
    
    .revie-parent {
      background: #fceadc;
      padding: 17px 38px;
    }
    
    .footerReviews {
      margin-top: 22px;
    }
        @media (max-width: 767px) {
    .blw-data { margin: 0 10px; }	
	}
    .blw-data {
      background: #fff;
      padding: 12px 13px;
    }
    @media (max-width: 767px) {
    .blw-data { margin: 0 10px; }	
	}
    .custom-reviews.static .slick-list {
      margin: 0 -7px;
    }
    
    .top-head.centr {
      justify-content: center;
    }
    
    @media (max-width: 767px) {
      .top-head h3 {
        text-align: center;
        font-size: 18px;
        line-height: 23px;
      }
      .custom-reviews.static .slick-list {
        padding: 0 20% 0 0 !important;
      }
      span.customSlArrow {
        display: none !important;
      }
      .below-reviews .slick-prev:before,
      .below-reviews .slick-next:before {
        color: #01aa0a;
      }
    }
  </style>
</head>
<body>
  <div class="custom-reviews static">
    <div class="page-width">
      <div class="revie-parent">
        <div class="top-head centr">
          <h3>Vertrouwd door <br> <span>350 000+</span> klanten.</h3>
        </div>
        <div class="below-reviews">
          <div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
            <div class="blw-data">
              <div class="rating--area">
                <div class="ratnmbr">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <div class="abtrate">Excellent</div>
              </div>
              <h2 class="reviw_title"></h2>
              <p>Fantastisch! De aankomst van de tweede bestelling, ik wacht weer met spanning! Kwaliteitsproducten en uitstekende service. Ik beveel het zeker aan!</p>
              <div class="footerReviews">
                <span>Review by <b>Emma</b></span>
              </div>
            </div>
          </div>
          <div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
            <div class="blw-data">
              <div class="rating--area">
                <div class="ratnmbr">
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                  <i class="fa fa-star" aria-hidden="true"></i>
                </div>
                <div class="abtrate">Excellent</div>
              </div>
              <h2 class="reviw_title"></h2>
              <p>Absoluut perfecte maataanduiding en de pasvorm is fantastisch! Ik ben oprecht dankbaar. Bedankt voor de juiste levering!</p>
              <div class="footerReviews">
                <span>Review by <b>Floris</b></span>
              </div>
            </div>
          </div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Deze webshop heeft me echt verbaasd. Snelle verzending en hoogwaardige producten. Ik zal hier zeker weer winkelen!</p>
    <div class="footerReviews">
      <span>Review door <b>Lisa</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    
    <p>Deze webshop heeft een geweldige selectie en uitstekende klantenservice. Ik ben zeer tevreden met mijn aankoop.</p>
    <div class="footerReviews">
      <span>Review door <b>John</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Geweldige ervaring! Deze webshop heeft een uitstekende klantenservice en een ruime keuze aan producten. Mijn bestelling kwam snel aan en was in perfecte staat. Ik ben erg tevreden en zal zeker weer bij hen winkelen!</p>
    <div class="footerReviews">
      <span>Review door <b>Karen</b></span>
    </div>
  </div>
</div>

<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
  <div class="blw-data">
    <div class="rating--area">
      <div class="ratnmbr">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
      </div>
      <div class="abtrate">Excellent</div>
    </div>
    <p>Deze webshop is mijn favoriet! De website is gebruiksvriendelijk, het assortiment is indrukwekkend en de verzending is altijd op tijd. Ik ben een loyale klant geworden en heb geen reden om ergens anders te winkelen.</p>
    <div class="footerReviews">
      <span>Review door <b>Sophie</b></span>
    </div>
  </div>
</div>
        </div>
      </div>
    </div>
  </div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>

  $('.custom-reviews.static .below-reviews').slick({

  slidesToShow: 3,
  responsive: [
    {
            breakpoint: 9999999,
            settings: "unslick"
        }, {
      breakpoint: 768,
      settings: {
         dots:false,
  infinite: true,
  speed: 300,
   
   arrows: true,
        slidesToShow: 1
      }
    }
  ]
});
$('.below-reviews.slidesslidr').slick({
 dots:false,
  infinite: true,
  speed: 300,
   arrows: false,
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
   arrows: true,
        slidesToShow: 1
      }
    }
  ]
});

  $("body").on("click","span.customSlArrow.leftArrowCR", function(){


  $('.below-reviews').slick('slickPrev');
});
    $("body").on("click","span.customSlArrow.righttArrowCR", function(){


  
  $('.below-reviews').slick('slickNext');
});
$('.responsive').slick({
  centerMode: true,
  autoplay:true,
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  centerPadding: '0px',
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '25px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '20px',
        slidesToShow: 1
      }
    }
  ]
});
  $("body").on("click",".slider.slider--mobile .slider__slide img", function(){
  console.log("success");
});
 function getimage(){
   setTimeout(function(){
   var inds=$('.topsldis li').find('button[aria-current="true"]').parent().attr('inds');
  
    $('ul.mob---slides li').removeClass('active');
     $('ul.mob---slides li[inds='+inds+']').addClass('active')
     },10)
 }
  $('ul.mob---slides li').click(function(){
    var inds=$(this).attr('inds');
     $('ul.mob---slides li').removeClass('active');
    $(this).addClass('active')
    $('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+']')[0].click();
     $('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+'] button').trigger('click')
  })
</script>

</body>
</html>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Alllways · ‎11-05-2023

No worries! I am grateful for you help!

It still does not work for me...

Im thinking, does it have to do with the fact that i need to update my theme? or should that have no effect?

Right now I am using: Sense 11.0.0

Dan-From-Ryviu · ‎11-05-2023

I'm tried on my Sense 10.0.0. Could I request access to your store so I can check and help you to make it works?

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Re: Making Custom Code Mobile Friendly

How to make custom code mobile friendly?

Community Blog Articles