Position of Captions in Gallery Slide show/:simple

Hello, I would like to know how to place captions on the left of the image in gallery slideshow: simple, instead of below the image as it is on this website:

https://www.japan-art.com/en/artists/36-monika-huber/works/14-works-on-canvas-and-wood/9985-monika-huber-021628-o.t.-sw4-2011-2017/

Is there any code that can help with this requirement?

Thanks, 

Give this code a try.

.records_list ul li a, .records_list ul li a:visited {
    display: flex !important;
}

span.image.lazyload_wrapper.lazyload_initialized.lazyload-fallback-dimensions.loaded {
    order: 2;
}

Thank you for that suggestion. 

Unfortunately, it made no change. Captions are still appearing below the image in the slideshow. 

1 hour ago, RKS said:

Thank you for that suggestion. 

Unfortunately, it made no change. Captions are still appearing below the image in the slideshow. 

These are the results that code gives me. Did you add this code in a style tag?

Thank you for helping.

This one I shared earlier is a reference site: https://www.japan-art.com/en/artists/36-monika-huber/works/14-works-on-canvas-and-wood/9985-monika-huber-021628-o.t.-sw4-2011-2017/ built on ArtLogic. 

The site here is my site and as you will see the captions are appearing below the image in the slideshow: https://toucan-rhombus-85w7.squarespace.com/in-repose_gallery

password: AB123!

I need the captions on my site to appear as they do on the reference site. I tried the code you gave in Squarespace css but it did not have any effect. 

On 11/24/2022 at 1:37 AM, RKS said:

Thank you for helping.

This one I shared earlier is a reference site: https://www.japan-art.com/en/artists/36-monika-huber/works/14-works-on-canvas-and-wood/9985-monika-huber-021628-o.t.-sw4-2011-2017/ built on ArtLogic. 

The site here is my site and as you will see the captions are appearing below the image in the slideshow: https://toucan-rhombus-85w7.squarespace.com/in-repose_gallery

password: AB123!

I need the captions on my site to appear as they do on the reference site. I tried the code you gave in Squarespace css but it did not have any effect. 

 

 

You mean move text to left of image?

Yes, that's exactly what I mean. 

@tuanphan

Update: I switched to Autolayout under People Section and that gave me the option to have a Banner Slideshow where it is possible to place text on the side of the image. The following resource was helpful: https://www.beatrizcaraballo.com/blog/squarespace-auto-layouts-slideshow 

It seems that the only problem I have now is that the drop shadow on the image in the banner-slideshow is not  showing up on mobile (it is showing up in the Mobile View in the edit mode but not when I check on my phone). Link here: https://toucan-rhombus-85w7.squarespace.com/paintings. Code: AB123!

Here is the code I have used for the entire bit including the mobile:

.user-items-list-banner-slideshow .slide-media-container {margin-left: 0px; position: relative; filter: drop-shadow(3px 4px 2px #DACBBF);}
.user-items-list-banner-slideshow .slide {flex-direction: row-reverse;}
@media screen and (max-width: 767px){.user-items-list-banner-slideshow .slide {flex-direction: column;}.user-items-list-banner-slideshow .slide-media-container {padding-top: 20px; filter:drop-shadow(3px 4px 2px #DACBBF);} .user-items-list-banner-slideshow .slide-content {;margin-bottom: 15px;}}

Thank you!