How can i code a banner slideshow on mobile?

Hoping someone can help me code this to not look so bad on mobile! @tuanphan you are always so helpful!

I'd like it to at least appear to be more rectangular on mobile. I'd settle for square but it just cuts too much off!

https://caper-oval-e5kt.squarespace.com/home-page-1

You're going to struggle a bit due to the very different lengths of the testimonials, so you'll need to consider tweaking based on that.

Anyway, this will create a layout where the image is stacked on 

/*Squareskills - Mobile Slideshow Caption*/
#YourSectionID {
  li.slide.list-item {
    flex-direction: column;
}
  .slide-media-container {
    position: relative!important;
    height: auto!important;
    aspect-ratio: 3 / 2; //select your own Aspect Ratio here
  }
  .slide-content.list-item-card-background.list-item-rich-animation {
    margin: 0!important;
    position: relative;
    width: 100%!important;
    flex: 1; //remove if you don't want full-height captions
  }
}

However, if you try to ensure all images have the same aspect ratio you'll get this (excuse the poor cropping) where there is empty space. You can use the "flex: 1" to turn that section blue (in your case) but it'll still be empty space to consider.

@KwameAndCo amazing! Is there a way to also set a font size so I can make it a bit smaller on mobile?

@KwameAndCo also - to clarify i do NOT want it to look like this on desktop, ONLY on mobile. 

(Adding the code did this to the desktop version)

@KwameAndCo is there a way to put text over the banner slideshow? the "bump birth and beyond" line is what I'm trying to overlay over the slideshow.

https://caper-oval-e5kt.squarespace.com/home-page-1-1

17 hours ago, ThisWayToFabulous said:

@KwameAndCo also - to clarify i do NOT want it to look like this on desktop, ONLY on mobile. 

 

Ah I thought you'd have a media query already.

/*Squareskills - Mobile Slideshow Caption*/

@media (min-width: YOURBREAKPOINT) {
  
  #YourSectionID {
    li.slide.list-item {
      flex-direction: column;
    }
    .slide-media-container {
      position: relative!important;
      height: auto!important;
      aspect-ratio: 3 / 2; //select your own Aspect Ratio here
    }
    .slide-content.list-item-card-background.list-item-rich-animation {
      margin: 0!important;
      position: relative;
      width: 100%!important;
      flex: 1; //remove if you don't want full-height captions
    }
    .list-item-content__description p {
      font-size: YOURSIZE; //set your font size
    }
  }
}

I can't see the page anymore but you can just target the text with that last selector. You might need to use !important.