I want my testimonial slide (list carousel) to display images to the left of the title, having them side by side.

The carousel I'm referring to is on the homepage (https://snail-lemon-4w2b.squarespace.com), near the bottom: 

I'd like the image to appear to the left and side by side with the quote. 

However, I don't want the "case studies" carousel below it to be affected. Is there any CSS I could use to make this possible? Thank you so much!

Hi,

What is password?

@tuanphan The password is toybox. Thanks!

Add to Design > Custom CSS

/* List testimonial */
@media screen and (min-width:992px) {
.user-items-list-item-container[data-section-id="648794747c34a03404938d6c"] li {
    flex-direction: row !important;
}
.user-items-list-item-container[data-section-id="648794747c34a03404938d6c"] .list-item-content {
    width: 80%;
}}

Hello, I want the image to appear beneath the content

On 9/4/2023 at 8:35 PM, Chesterfield said:

Hello, I want the image to appear beneath the content

Change "row" in the code to

column

OR

column-reverse

hi @tuanphan this is helpful!

I need help so the image shows at the side of body, your code results it showing at the side of title. in the case of my website https://dianpaskalis.com/, it should show next to the person name. Is that possible?

On 5/19/2024 at 6:56 AM, dpaskalis said:

hi @tuanphan this is helpful!

I need help so the image shows at the side of body, your code results it showing at the side of title. in the case of my website https://dianpaskalis.com/, it should show next to the person name. Is that possible?

Use this code

@media screen and (min-width: 768px) {
    .user-items-list-item-container[data-section-id="6642de900f066c1856fd81c2"] li {
        flex-direction:row !important;
        align-items: flex-end;
    }

    .user-items-list-item-container[data-section-id="6642de900f066c1856fd81c2"] .list-item-content {
        width: 80%;
    }
    .list-item-media {
        margin-bottom: 0px !important;
    }
}