Debut theme - Slideshow text and button overlay on mobile

[STIFCforum]

Hello Shopify community,

I would like to change the way a slideshow with text or text and a button looks on mobile devices.

Currently, the slideshow looks good on desktop but on mobile, the text and the button is under the slides.

I would like to have the slideshow pictures have a text overlay and button overlay on mobile and make it look the same as it does on the desktop version, perhaps by resizing the text size on the mobile version and putting the text and the button on top of the images. The URL of my store is: (stifc.com)

Any help or suggestions would be highly appreciated!

[KetanKumar]

@STIFCforum 

Thanks for post 

i have check this issue but sorry i can't see this slideshow section can you please show me.

[STIFCforum]

I turned off the slideshow but I just turned it back on its at the top of the homepage so you could check.

Thanks!

[KetanKumar]

@STIFCforum 

Thanks or it 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
.slideshow__title, .slideshow__subtitle {
    display: inline-block !important;
}
.slideshow__text-content--mobile {display: none !important;}
}

[STIFCforum]

@KetanKumar 

Thanks for your reply!

I've pasted the code but the text doesn't adjust on mobile and I can't see the button on the second slide.

[KetanKumar]

@STIFCforum 

sorry for this 

can you please add this code

@media only screen and (max-width: 749px) {
.slideshow__btn {
    display: inline-block !important;
}
}

[STIFCforum]

@KetanKumar 

Hello and thank you for your reply!

This code partially solves the issue and I was able to adjust the text and button size myself.

Just one more thing, how could I change the picture opacity on mobile because the picture is bright and it's hard to see the text. This option works automatically on desktop, its called "show overlay" in the slideshow settings. Also is it possible to make the slideshow buttons on mobile look the same as on desktop?

[KetanKumar · Accepted solution]

@STIFCforum 

Yes, please try this code 

.slideshow__overlay::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-image-overlay);
    opacity: var(--opacity-image-overlay);
    z-index: 2;
}

[STIFCforum]

@KetanKumar 

Thank you that code solved the issue!

Do you know if it's possible to make the slideshow buttons on mobile look the way they look on desktop or something similar to that?

I appreciate all your help.

[KetanKumar]

@STIFCforum 

Thanks for your feedback and support.

@media only screen and (max-width: 749px) {
.slideshow__text-wrap--mobile {display: none;}
.slideshow__controls {
    top: auto;
    left: 0;
    bottom: 0;
}
.slideshow__arrows {display: flex;}
.slideshow__arrows .slideshow__arrow-previous {order: -1;}
.slideshow__arrows .slideshow__arrow-next {order: 1;}
}

[STIFCforum]

@KetanKumar 

Thanks so much that helped fix the arrows.

There seems to be just one minor issue now when I pasted the last code.

Whenever I tap the slideshow on mobile or interact with it there are blue lines around the picture. Do you know a way to fix this?

[KetanKumar]

@STIFCforum 

Thanks, 

yes, please add this code.

:focus {outline: none !important;}

[buddlecases]

@KetanKumar  Thank you for this! Also worked for myself. One thing, how can I make the height of the slideshow slightly bigger for mobile? At the moment it looks quite squashed.

[KetanKumar]

@buddlecases 

thanks for it i can't see any issue. how can i guide you

[buddlecases]

Hello @KetanKumar on mobile the button is quite big so it all looks squashed. Is there a way to increase the height of the slideshow or decrease  the button 

 

[KetanKumar]

@buddlecases 

yes, reduce font size may set proper

[Timito]

Hi @KetanKumar 

my website is sneakersafe.co.uk

How can I make this black button smaller on mobile version? Thank you

[KetanKumar]

@Timito 

Thanks for it

@media only screen and (max-width: 749px) {
.slideshow__btn {
    font-size: 12px;
    line-height: normal;
    padding: 11px;
    min-height: 1.125rem;
}
}

[Timito]

@KetanKumar Perfect thank you

[KetanKumar]

@Timito 

it's my pleasure to help us

[Jojothe]

How do I display my logo  at start up or at opening of my website in début theme. Thank

[Nushopzmoda]

Hi..Ketan Kumar,

We have exact same issue on the slideshow on mobile and saw your few codes to resolve it... As we are very new and afriad to do it wrong, can you please help to put those few codes you have given into a single screen so we can copy and paste to solve the text over image, shop button, opacity and image outline issues. Thank you so much.

[Nushopzmoda]

Hi and good day,

Our webstore is www.nushopzmoda.com

I have pasted the below as instructed and it looks all good on PC.

@media only screen and (max-width: 749px) {

.slideshow__title, .slideshow__subtitle {

    display: inline-block !important;

}

.slideshow__text-content--mobile {display: none !important;}

}

  @media only screen and (max-width: 749px) {

.slideshow__btn {

    display: inline-block !important;

}

}

  @media only screen and (max-width: 749px) {

.slideshow__text-wrap--mobile {display: none;}

.slideshow__controls {

    top: auto;

    left: 0;

    bottom: 0;

}

.slideshow__arrows {display: flex;}

.slideshow__arrows .slideshow__arrow-previous {order: -1;}

.slideshow__arrows .slideshow__arrow-next {order: 1;}

}

However, found the below issues on mobile (nearly 100% of our web visitors are using mobile phones)

the text overlay on slide did not appear and

there were 2 more round black dots/buttons below the slides and

there is a portion of white background (about 3mm) that "eats" into the slides

I have tried attached a mobile screenshot but in here does not allowed Jpeg file (you may help by viewing on mobile)

Highly appreciate your help to please help to resolve the issue...Thank you so much

[KetanKumar]

@Nushopzmoda 

yes please add this code

.slideshow__arrows.slideshow__arrows--mobile {
    display: none;
}

[nicolasfloriano]

Hi and good day

I pasted the following code on my website

@media only screen and (max-width: 749px) {
.slideshow__text-wrap--mobile {display: none;}
.slideshow__controls {
top: auto;
left: 0;
bottom: 0;
}
.slideshow__arrows {display: flex;}
.slideshow__arrows .slideshow__arrow-previous {order: -1;}
.slideshow__arrows .slideshow__arrow-next {order: 1;}
}
:focus {outline: none !important;}

and it was exactly what I wanted, but I saw that on the cell phone the slide-show buttons stayed big, is there any way to make it smaller? sorry if had a error in my english, I do not speak very well

here a picture of how the slide-show looks in my phones

[Joney]

Hello,

Can someone please direct me? I'm experiencing issues removing the slideshow navigation bar from the mobile view. 

[ShopOwner28]

Hi there, everything pretty much worked, but I was wondering if there was a way to increase the height of the photo. Using the examples Shopify offers, the image is large enough to take up the screen but its ends up cutting it off to make it a square instead of a rectangle. I hope that makes sense. Basically, I'd love for the mobile image to take up the whole image of the screen longways before it reaches the footer. 

               

[KetanKumar]

@ShopOwner28 

yes, please sure share store url

[WoutervdMeer]

Hi @KetanKumar 

I tried this piece of code on my store but it does not work.

Can you please help me out?
website: https://www.biervaneigenbodem.nl/

[KetanKumar]

@WoutervdMeer 

yes, please confirm this look

[WoutervdMeer]

Yes, one additional question: can you also overlay the swiping buttons? Or will that look bad?

Thank you very much!!

If this is possible, please provide the code 🙂

[KetanKumar]

@WoutervdMeer 

yes, please add button so i will give you full code

[WoutervdMeer]

I mean the button to move to the next and previous slide which is currently there.

Do you understand what I mean?

And is it possible to show the slideshow image's full width? Currently cuts off a part of the image. 

Thank you!

[KetanKumar]

@WoutervdMeer 

yes sure but i cant' see now button can you show me?

[WoutervdMeer]

these buttons for moving between slides, not the actual CTO button.

[KetanKumar]

@WoutervdMeer 

oh i see just text overlap in image right?

[WoutervdMeer]

@KetanKumar exactly! How can I implement this? (And maybe hide the pause button on the top right corner)

[KetanKumar]

@WoutervdMeer 

it can be done some customization code 

[WoutervdMeer]

@KetanKumar can you do that for me?

[WoutervdMeer]

Hi @KetanKumar ,

Is it possible for you to provide me the code?

Or can I hire you as an expert?

Kind regards,

Wouter 

[noenshop]

Hello ketan,

can you help me? On desktop you see the text come up in the picture overlay. Hoe can I fix that for mobile screen?

[JuanOrdonez]

Hello! This code for me, trying to fix the same issue:

@media only screen and (max-width: 749px) {
.slideshow__btn {
    display: inline-block !important;
}
}

The problem is, I now have two buttons! A new one perfectly aligned in the center of the slide show (mobile version), and the old one right underneath the slide show. How could I delete the old one?

Thanks so much in advance!

[JCjack]

Hey Ketan,

I am also having the same issue. This code is not working for me.

my URL is www.clubsportgarage.co.uk

Many thanks,

Jack

[KetanKumar]

@JCjack 

sorry for this issue 

bt i can't see text content at home page slider can you please show me 

[JCjack]

I managed to fix the issue from another thread. However is it possible to reduce the slideshow button size for the mobile version?

[KetanKumar]

@JCjack 

sorry but i can't see

[CShop]

The code at the first page solved the issue with having the button & text below the image. But how can you place the button and the text at the bottom of the image (instead of in the middle of the image)? 

Thank you in advance!

[miital514]

I tried this, it didn't work for me.

[KetanKumar]

@miital514 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Jenn28]

Hello. I would actually like to do the opposite. I want the text and button to remain below the photo slideshow when in desktop view. Please help. Thank you!