List section image placement

Hello, I'm wondering if there is any code that can move the image to the left side of the text within a card in list sections?

List Slideshow, List Carousel or?

This is an example with List Banner Slideshow: https://thung.squarespace.com/list-section-left-image-right-text?noredirect

Pass: abc

Add code to Page Header

<style>
  @media screen and (min-width:992px) {
.user-items-list-banner-slideshow[data-card-horizontal-position="left"] .slide {
    justify-content: space-between;
    grid: unset !important;
}
.user-items-list-banner-slideshow .slide-media-container {
    width: 50%;
}
.user-items-list-banner-slideshow .slide-content {
    margin-left: 55%;
    }
  .desktop-arrows.arrow-container.arrow-container--right {
    right: calc(50% + 6vw) !important;
}

button.user-items-list-banner-slideshow__arrow-button * {
    display: none;
}

button.user-items-list-banner-slideshow__arrow-button.user-items-list-banner-slideshow__arrow-button--left:before {
    content: "\f053";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    font-size: 30px;
    color: white;
}
button.user-items-list-banner-slideshow__arrow-button.user-items-list-banner-slideshow__arrow-button--right:before {
     content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    font-size: 30px;
    color: white;
}
  }

</style>

And here for List Carousel: https://thung.squarespace.com/list-carousel-half-text

Pass: abc

Add code to Page Header

<style>
  @media screen and (min-width:992px) {
  ul.user-items-list-carousel__slides.user-items-list-carousel__slides--initialized {
    grid-gap: 0 !important;
    padding: 0 !important;
}
.user-items-list-carousel__gutter {
    padding: 0 !important;
}
li.user-items-list-carousel__slide.list-item {
    flex-direction: row !important;
    align-items: center !important;
}
.list-item-content {
    padding: 20px;
}
.user-items-list-carousel__arrow-positioner {
    padding-bottom: 30% !Important;
}

  }
</style>

Perfect! Thank you SO MUCH @tuanphan!

On 7/8/2022 at 7:56 AM, tuanphan said:

List Slideshow, List Carousel or?

This is an example with List Banner Slideshow: https://thung.squarespace.com/list-section-left-image-right-text?noredirect

Pass: abc

Add code to Page Header

<style>
  @media screen and (min-width:992px) {
.user-items-list-banner-slideshow[data-card-horizontal-position="left"] .slide {
    justify-content: space-between;
    grid: unset !important;
}
.user-items-list-banner-slideshow .slide-media-container {
    width: 50%;
}
.user-items-list-banner-slideshow .slide-content {
    margin-left: 55%;
    }
  .desktop-arrows.arrow-container.arrow-container--right {
    right: calc(50% + 6vw) !important;
}

button.user-items-list-banner-slideshow__arrow-button * {
    display: none;
}

button.user-items-list-banner-slideshow__arrow-button.user-items-list-banner-slideshow__arrow-button--left:before {
    content: "\f053";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    font-size: 30px;
    color: white;
}
button.user-items-list-banner-slideshow__arrow-button.user-items-list-banner-slideshow__arrow-button--right:before {
     content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    font-size: 30px;
    color: white;
}
  }

</style>

And here for List Carousel: https://thung.squarespace.com/list-carousel-half-text

Pass: abc

Add code to Page Header

<style>
  @media screen and (min-width:992px) {
  ul.user-items-list-carousel__slides.user-items-list-carousel__slides--initialized {
    grid-gap: 0 !important;
    padding: 0 !important;
}
.user-items-list-carousel__gutter {
    padding: 0 !important;
}
li.user-items-list-carousel__slide.list-item {
    flex-direction: row !important;
    align-items: center !important;
}
.list-item-content {
    padding: 20px;
}
.user-items-list-carousel__arrow-positioner {
    padding-bottom: 30% !Important;
}

  }
</style>

Hi! Is there any way I could get the image on the left of the text on a simple list section? Would be much appreciated. Thanks in advance!

1 hour ago, oliocreative said:

Hi! Is there any way I could get the image on the left of the text on a simple list section? Would be much appreciated. Thanks in advance!

(1) First, use this free tool to find ID Of List Section

https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

In my example, we will have ID

section[data-section-id="664b284c640d2d288a25313e"]

(2) Use this code to Website Tools > Custom CSS

section[data-section-id="664b284c640d2d288a25313e"] li.list-item {
    flex-direction: row !important;
    align-items: center;
}

Result

to make code run on desktop only, use this code

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