Slider caption transparency & size & position

Can you link to the demo that you’re referring to so I can be sure of what you’re talking about?

Try adding this CSS and let me know if it does what you’re wanting.

-Kevin

Hi Kevin,

Thank you for the fast reply.

I think you may of missed off the CSS

The link is.. https://themes.kadencethemes.com/virtue/

Basically in your sites demo the text looks placed in the photo rather than showing any transparent box at all.
Where as with mine you can clearly see the darker box around my caption text “making home sparkle” etc.

Its even worse on mobile as it takes up half the height of my photo if you view it on mobile.

best regards
Paul

P.s.. Im a novice and my above CSS was just what i have learned by trialled and error of reading the support and googling before contacting you so it may be wrong and not all necessary. Please advise if I also need to remove any and change any as well.

Thank you

Paul

The demo site actually has the text added to the image prior to being uploaded for the slider.

Here is the CSS that I intended to share:

.captiontitle h4 {
    margin: 0;
}

.captiontitle.headerfont {
    background: rgba(0, 0, 0, 0.56);
}

let me know if that works for you. And in response to your last post, yeah that CSS may be causing the problem.

My CSS should fix it, but if it persists, we’ll look at your other CSS and see if we can find a better way to write it.

-Kevin

Ah i did wonder if it had been added first,

Yes thats got the caption box closer thank you ….. can we try to go a tiny bit more please… (then i will also learn/understand what change you have made for future reference.

And as for the transparency its actually gone darker.

Thanks
Paul

Would you prefer to remove the shadow completely?

You can do so with this CSS:

.captiontitle.headerfont {
    background: transparent;
}

-Kevin

Brilliant thank you Kevin, yes that exactly what I wanted and its worked perfectly on desktop.

As Im using the mobile flex slider do i need to add separate CSS for that as that is still dark?… (i have cleared phone cache)

Below is the revised CSS I now have including yours..

.captiontitle.headerfont {
background: transparent;
}

.captiontitle h4 {
margin: 0;
}

.flex-padding {
padding: 0;
}

.flex-caption {
width: 100%;
text-align: center;
position: relative;
bottom: 54px;
margin: 0 auto;
}

.flex-mobile-caption {
width: 100%;
text-align: center;
position: relative;
bottom: 47px;
margin: 0 auto;
}

.flex-mobile-padding {
padding: 0;
}

Thanks
Paul

Hey Paul,
I’m seeing your flex captions with a transparent background on mobile. Have you cleared all your cache? What device are you using?

Hannah

Hi Hannah,

Sorry for my slow reply.

Yes its clear now thank you.. I did clear caches on my phone but think it took some time to clear/come through.

How can i centralise it on the mobile slider please?

I have still got the same CSS as posted below… Im not sure whats incorrect or if any conflict.

.captiontitle.headerfont {
background: transparent;
}

.captiontitle h4 {
margin: 0;
}

.flex-padding {
padding: 0;
}

.flex-caption {
width: 100%;
text-align: center;
position: relative;
bottom: 54px;
margin: 0 auto;
}

.flex-mobile-caption {
width: 100%;
text-align: center;
position: relative;
bottom: 47px;
margin: 0 auto;
}

.flex-mobile-padding {
padding: 0;
}

Thank you and
Best regards

Paul

I’m already seeing your captions centered on mobile. Do you mean to vertically centralize?

Hannah

Hi Hannah,

Thank you for the reply

Ahh sorry no thats because Ive just reverted back to my old setting at the moment as I created a big problem with 404 errors so its now on a previous a backed up just at present temporarily … (thats why the transparency on captions isn’t there again either… I stupidly hadnt backed up the latest)

The setting im talking about was as before, i was using mobile flex slider with only one photo and auto play turned off and the image was larger…

So the caption was/is over to the right say 2/3 rds approx.

I will be reverting back soon as ive time to edit again

Is there a general CSS you would use to off set… I will be using all the above CSS as posted above

Kind regards

Paul

Try adding this css:

.flex-caption {
    left: 20px;
}

Does that work for you?

Hannah