FROM CACHE - en_header
New Shopify Certification now available: Liquid Storefronts for Theme Developers

Editing custom css

Alllways
Excursionist
24 0 5
‎11-05-2023 01:41 PM

Hello!

 

I have been working on a custom review section on my productpage. 

 

Im almost finished but I have been trying to make it like a slider on phone (shown in example) but i cant figure it out on how to do that. Could someone help me with this?

 

I will add the code I am using currently and pictures of how i want/hace it.

 

Example website: https://anna-lea.nl/products/casual-sweatshirt 

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

 

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;
    }
   @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>

WhatsApp Image 2023-11-05 at 15.54.34 (1).jpegWhatsApp Image 2023-11-05 at 19.39.32.jpeg

Labels:
65 Views
0 Likes
Report
Reply 1 (1)
PaulNewton
Shopify Partner
5931 537 1241
‎11-05-2023 04:09 PM

The website already has a good working review section and the design behavior is already established that elements stack on mobile, adding sliders will probably just be unnecessary bloat impacting performance.

The example site uses slick slider, it requires javascript knowledge.

Also beware the example site has serious issues with responsive layout so be incredibly careful testing anything copied from it.

 

@Alllways wrote:

I will add the code I am using currently and pictures of how i want/hace it.

 

Your expecting someone to read all that code and take it , fix it, improve it, and finish building your project for you.

You need to hire someone, that is way beyond the scope of the forums.

You need to either drastically narrow and simplify the scope of your question to specific issues.

Like how do I make a background red, or add an image icon, etc.

 

 

If you need this full customization fixed and built you may contact me by mail for services.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Contact info in signature.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org


45 Views
0 Likes
Report
Community Browser

Community Blog Articles

Jasonh_0-1701799488302.png
Community Connect: November Recap

Transform this holiday season into a shopping spree. Plus, learn how to effortlessly open ...

By Jasonh Dec 8, 2023
cropped-shutterstock_2285098703.jpg
Donations Before Discounts: The Greatest Incentive

Make the shift from discounts to donations, and witness your business not only thrive fina...

By Holly Dec 4, 2023
cropped-SYSO-okt23-GROW.png
Unlocking the Secrets of E-commerce Success: An Exclusive Interview with SY...

On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...

By Arno Nov 27, 2023
Terms of Service Privacy Policy