How to remove the box overlay that's on top of slideshow pictures

Hi, I was wondering if it was possible to remove the ‘‘Image slide’’ text box that seem to overlay the pictures I upload in my slideshow section (dawn) all I’ve been able to modify via the slideshow settings was the text, which I deleted but the box stays there (as you can see from my two attached pictures below) and I’d like my slideshow photos to be totally unobstructed.

If anyone has a fix for this please let me know ! My brand is launching very soon and I’d like my website to be top of the line for then !

Thank you.

HI @Over_Heavens ,

Would you mind to share your URL website? with password if its protected. Thanks!

1 Like

Sure thing ! Here’s the URL https://shopexilestar.com/ I’m not too used to the protocol around here on account of being new so I’m sending you my password in a private message if it’s not a problem.

1 Like

Thank you for the information. Do you want the whole will be remove including the text?

If its include try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.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:
  4. And Save.
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
    display: none;
}

Result:

If you like to keep the text. Try this.

.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
    background: transparent !important;
}

Result:

I hope it help.

2 Likes

I just pasted the code and it works perfectly ! Thank you so much, you’ve been a great help !!!

1 Like

Welcome! :blush:

Hi,

I have the same problem. Want to keep the text and the link button, but want to remove the box as it covers too much of the pictures in the slideshow. It doesn’t work to paste the above code under assset -base.css. As you see, I’ve added a second button - but that should effect it?

Excuse me - I found another code that worked:

.slideshow__text.banner__box {
background-color: transparent !important;

Problem solved - sorry for interrupting.

That is good to hear. Sorry, I didnt catch up to help you.

i want to move the slider heading above the slider image, can anyone help me to do this..

Thanks

1 Like

Hi @Karunakar

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

I have tried everything and anytime i try to make the rectangle box behind text disappear from any section ( i tried them all with different code i found for each and every section ) nothing works the box stays there can someone please help me ?

Morning,

I added this line of code to the bottom of the file however it did not remove the box. I did add a custom background could that be interfering with it…any help would be great thanks!

Hello

Were you able to successfully remove the box from the slide show? I tried the codes as well and have been unsuccessful.