Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an accepted solution.
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;
}
Thanks for post
i have check this issue but sorry i can't see this slideshow section can you please show me.
I turned off the slideshow but I just turned it back on its at the top of the homepage so you could check.
Thanks!
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;}
}
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.
sorry for this
can you please add this code
@media only screen and (max-width: 749px) {
.slideshow__btn {
display: inline-block !important;
}
}
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?
This is an accepted solution.
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;
}
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.
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;}
}
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?
Thanks,
yes, please add this code.
:focus {outline: none !important;}
@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.
thanks for it i can't see any issue. how can i guide you
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
yes, reduce font size may set proper
Hi @KetanKumar
my website is sneakersafe.co.uk
How can I make this black button smaller on mobile version? Thank you
Thanks for it
@media only screen and (max-width: 749px) {
.slideshow__btn {
font-size: 12px;
line-height: normal;
padding: 11px;
min-height: 1.125rem;
}
}
it's my pleasure to help us
How do I display my logo at start up or at opening of my website in début theme. Thank
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.
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
yes please add this code
.slideshow__arrows.slideshow__arrows--mobile {
display: none;
}
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
Hello,
Can someone please direct me? I'm experiencing issues removing the slideshow navigation bar from the mobile view.
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.
yes, please sure share store url
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/
yes, please confirm this look
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 🙂
yes, please add button so i will give you full code
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!
yes sure but i cant' see now button can you show me?
these buttons for moving between slides, not the actual CTO button.
oh i see just text overlap in image right?
@KetanKumar exactly! How can I implement this? (And maybe hide the pause button on the top right corner)
it can be done some customization code
@KetanKumar can you do that for me?
Hi @KetanKumar ,
Is it possible for you to provide me the code?
Or can I hire you as an expert?
Kind regards,
Wouter
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?
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!
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
sorry for this issue
bt i can't see text content at home page slider can you please show me
I managed to fix the issue from another thread. However is it possible to reduce the slideshow button size for the mobile version?
sorry but i can't see
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!
I tried this, it didn't work for me.
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.
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!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024