Jump to content

Repositioning image on carousel testimonials

Go to solution Solved by Lesum,

Recommended Posts

Posted

Hello,

I'm trying to change the testimonials section on my website to show the image and the text side by side (image on the left of the text), rather than the image above the text. Does anyone know how to achieve that?

I might also need to reposition the arrows for them not to collide with the image.

This is the URL: https://arthursimoes.com/teaching

I have tried different CSS codes that I found on the forum, but none of them worked so far - probably because I'm not changing the right parameters in the code.

Thank you in advance for your help!

  • Solution
Posted (edited)

@ArthurSimoes Hi! To display the image on the left and text side by side in the testimonial carousel (auto layout section), add this code under Website > Pages > Website Tools > Custom CSS

@media screen and (min-width: 768px) {
  section[data-section-id="6668b01aa1819614c462641c"] {
    li.user-items-list-carousel__slide.list-item {
      flex-direction: row !important;
      align-items: flex-start;
    }
    .list-item-content {
      padding-left: 4vw;
      max-width: 80% !important;
    }
    h2.list-item-content__title {
      max-width: 100% !important;
    }
    .list-item-content__description {
      max-width: 100% !important;
    }
  }
}

 

Edited by Lesum
updated code

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.