Debut theme: display text inside of the slideshow on mobile
The Debut theme's slideshow section, on mobile, by default, will move all text outside of it, making it show up right below the slideshow.
Today I'll be teaching you how to edit it with CSS code so the text shows up on top of the images, making it behave the same way it does on desktop.
Making a backup first
Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.
Finding the CSS file to add the code
- From your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
- Find the file named theme.scss.liquid, theme.css.liquid or theme.css. The name varies depending on the version of your theme.
- Scroll down to the very bottom of the file, paste the following code and save:
- It should look something like this:
Understanding the code and how to adapt it to your needs
Here are some key features that you can adjust in the code above:
32px = the title font size on mobile
15px = the subtitle font size on mobile
#000 = hex color of the overlay on top of the images. Darkening the image will make it easier to read the text inside of it
0.25 = the intensity of the overlay color. If you don't want to use any overlay, you can use 0.0.
Conclusion
That is it, you're good to go!
It's still important to keep in mind that Debut's slideshow comes with several limitations, like cutting off images on mobile and desktop.
Click here to read our other tutorial to learn how to fix the aforementioned issues and add more features to your Debut theme's slideshow.
You may also like
Here are some other tutorials you may be interested in:
– Add arrows & swiping to Debut product pages
– Debut “click to zoom” lightbox tutorial: mobile friendly images, slider & arrows
– Improve your website's safety: block right click, image copying and more
Was this article helpful?