Card location on 'Banner Slideshow' on mobile view

Site URL: https://www.bananrocket.com/home-copy

Hi,

Please have a look at https://www.bananrocket.com/home-copy with PW: 123456

On desktop view, the banner slideshow on top looks perfect. I like the slideshow to be full length and card locates on the right hand corner. However when it's viewed on mobile, the cards covers the whole slideshow images. I would like the card to be located a bit lower(adjacent)  to the image like the screenshot below. Or see https://www.bananrocket.com/ (on mobile view)

I tried to see if I can change the card's location by css coding but that card element is included in the whole slideshow that I can't select it and don't seem to be able to do it. 

Is there any way to do it or is this the limit I have to accept?

Look forward to hearing from you!

4 hours ago, Theo-the-fetcher said:

Site URL: https://www.bananrocket.com/home-copy

Hi,

Please have a look at https://www.bananrocket.com/home-copy with PW: 123456

On desktop view, the banner slideshow on top looks perfect. I like the slideshow to be full length and card locates on the right hand corner. However when it's viewed on mobile, the cards covers the whole slideshow images. I would like the card to be located a bit lower(adjacent)  to the image like the screenshot below. Or see https://www.bananrocket.com/ (on mobile view)

I tried to see if I can change the card's location by css coding but that card element is included in the whole slideshow that I can't select it and don't seem to be able to do it. 

Is there any way to do it or is this the limit I have to accept?

Look forward to hearing from you!

 

Try the following code to move the content lower a little bit

@media only screen and (max-width: 767px) {
  section[data-section-id="61f00b03f4c4e61aa67fbada"] .user-items-list-banner-slideshow .slide-content {
    position: absolute;
    bottom: 0px;
  }
}