Jump to content

Card location on 'Banner Slideshow' on mobile view

Recommended Posts

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!

 

Screenshot 2022-02-07 at 10.52.55.png

Edited by Theo-the-fetcher
Link to comment
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!

 

Screenshot 2022-02-07 at 10.52.55.png

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;
  }
}

 

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.