How to make the slideshow text box background transparent - move text to bottom left of image

Store Design
1

i am using the origin theme. i was wondering if there is a way to remove the white background on the slideshow text box? i would like this to be done for all slideshows i put on my website please. so that it would be transparent.

another thing i am having trouble with changing is the location of the font on the images. i would like the text to be in the bottom left corner of the slideshow on each page please.

if anyone could help that would be great thank you!

2

Hi @jhoj

Would you mind to share your store URL? Thanks!

3

i actually managed to sort that out really easily on the theme editor, however i have another issue. on the mobile version, i would like the text on the slideshow to be on the bottom left corner of each image just like the desktop. the desktop already has the text on the bottom left, im unsure however how to do that for the mobile version? and if the fonts on the slideshow could be a little smaller on the mobile version too!

shopify url; 5f7c8a-da.myshopify.com

password- thahme05

1 Like
4

Thanks for the info, do you mean like this?

Made4uoRibe_0-1714157212314.png
Made4uoRibe_0-1714157212314.png618Ă—457 261 KB

Made4uoRibe_1-1714157222696.png
Made4uoRibe_1-1714157222696.png619Ă—502 320 KB

if it is check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (max-width: 749px){
.slideshow__text.slideshow__text-mobile--left {
    position: absolute;
    bottom: 10px;
    left: 20px;
    padding-left: 0px;
    padding-bottom: 0px;
}
.slideshow__text.banner__box {
    position: absolute;
    bottom: 10px;
    padding-bottom: 0px;
}
h2.banner__heading.inline-richtext.h2 {
    font-size: 20px;
}
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!