Cannot lengthen box-shadow:

The way that uses a box shadow instead of a background color is very strange.

I’d do it this way

section.homepage-slider h1, section.homepage-slider h2 {
    font-size: 44px !important;
    line-height: 40px !important;
    margin-bottom: 0;
    text-shadow: 2px 2px 4px #000000;
    /* removing this line: box-shadow: inset 4px 5px 4px 6px rgba(0,0,0,.4); */
    padding: 20px;
    background-color: rgba(0,0,0,.5);
}

Given that, what do you want to change? You said “lengthen”, so play with padding-top and padding-bottom.

@sterndata

Steve, sorry! I meant the vertical length of the shadow!
It’s going all across the page and i want it to cover just the text and a bit more.

The red arrows mark where i want the background shadow to stop: https://prntscr.com/hw4qxt

” padding-left: and padding-right: ” move the text; whereas what i want is to trim the shadow to the length of the text!

PS: The code i used or your code, both work for the background shadow.
As padding goes, something like this ( padding: 20px; ) is enough for an uniform horizontal length; both top and bottom.

so you mean width?

#onetone-owl-slider .owl-item .item .inner .caption {
  width: 75%;
  margin: 0 auto;
}

If you have additional issues with your theme, I recommend asking at https://www.ads-software.com/support/theme/onetone#new-post so the theme’s developers and support community can help you with this.

@sterndata

Yes width! Sorry to have mislead you! I am working on my english.
Your code works! ??

What i now need to find out is how to make each shadow the width of the text for each slider.

Onetone support is very unresponsive; but that’s not you guys fault!

One question if possible.
How did you find so quickly “#onetone-owl-slider .owl-item .item .inner .caption ”
was the right id to change?
I went through inspect but could not find the particuar id/class responsible for that.

• This reply was modified 7 years, 2 months ago by johnatanasoff.

I just walked “up the tree” until I found something with a width of 100% and kept changing them until I hit the right one. Not particularly elegant, but if you pound on enough stuff, eventually you find the right one.

Try this CSS instead of the above:

section.homepage-slider h1, section.homepage-slider h2 {
    background: rgba(0,0,0,.5);
    width: 75%;
    margin: 0 auto;
}

@sterndata

Got ya.
Only now i am getting to know Inspector better.
For applying the shadow in inspector “Elements”, i found the html, in this case the text, and clicking on it gave me the exact css attribute to change. Pretty easy!
But for some reason i wasn’t being able to reduce the shadow width.

This code you sent also applies the shadow but it does not size it for each slider text width.
I have a feeling this one’s gonna be a hard one to pin down right?

• This reply was modified 7 years, 2 months ago by johnatanasoff.

You’ll find it. I find it’s best to let the stuff perk around in one’s mind for a while — and just as you’re about to fall asleep, it comes to you. Then it’s race to get back to the computer before you forget what that bright idea was!

Indeed! ??