Jump to content

List section image placement

Recommended Posts

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>

Screenshot_3.thumb.png.11ddb49ed7ee0ef0f0c4588596a242be.png

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>

Screenshot_2.thumb.png.d01b75266a3d334c74fb69556032c2b5.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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.