Slideshow Mobile Slide Content Over Image

Store Design
, , ,
1

I was wondering how I can get rid of the info container for mobile. I want it to look like this design with the text and the buttons left aligned in the bottom-left:

victorying_1-1677734783198.png
victorying_1-1677734783198.png236×506 35.2 KB

However at the moment it looks like this:

victorying_0-1677734284032.png
victorying_0-1677734284032.png391×801 112 KB

I want to keep the info content middle-left on Desktop.

Also, how to I have a different image for mobile?

The website is https://www.killercondiments.com.au/ and the password is killercronulla2230

Thanks in Advance :slightly_smiling_face:

2

@victorying

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media only screen and (max-width:749px){
  .banner--mobile-bottom:not(.banner--stacked) .banner__content{
    position: absolute;
    height: 100%;
  }
  .slideshow__media.banner__media.media{
    height: 100% !important;
  }
  .banner--mobile-bottom .slideshow__text.banner__box{
    background: transparent;
    justify-content: end;
    align-items: flex-start;
  }
}
3

websensepro_4-1677800115354.png
websensepro_4-1677800115354.png986×405 36.5 KB

When you show container on mobile checks, it will be fine

4

Thank you!