Custom CSS for adjusting Image captioning position

Hey Amazing people,
In simple word:
I am adding following code directly at the end of style.css (for various reasons):

.wp-caption-text a {

    background: rgba(0, 0, 0, 0.25) none repeat scroll 0 0;
    display: inline-block;
    padding: 0 3%;
    }
.wp-caption-text, .wp-caption-text a {
    color: #fff;
    font-size: 10px;
    margin-top: -28px;
    text-align: left;
    line-height: 20px;
    margin-left: 3px;
}

and then following code under custom css:

.wp-caption-text {
position: relative;
}

This combination has made everything image captioning awesome except this: https://i.snag.gy/psPuGX.jpg

In usual case ( second image), you can see the imaage caption is positioned well in bottom left but in case of smart lists , the position is distorted ( first image) its not properly aligned. How can I make this work for smart lists too?

Based on suggestions from my previous threads, I was using this code for smart-lists-1, 2 and 7 but it no more works now 🙁

.td_smart_list_2 .td-sml-caption div{
position:relative;
top:-25px!important;
left:10px
}
.td_smart_list_2 img{
pointer-events:none;
}
.td_smart_list_2 .td-sml-caption div a{
color: #FFF !important;
background-color:rgba(0, 0, 0, 0.15)!important;
}

You may want to look at any page on my website, for example this: https://tomatoheart.com/hiya/11-reasons-to-visit-kolkata/

PLEASE HELP

• This topic was modified 9 years by Nano.
• This topic was modified 9 years by Nano.
• This topic was modified 9 years by Nano.
• This topic was modified 9 years by Nano.

Hey Bogdan,
Thank you.
I tried changing it’s positioning using tutorial given under http://www.w3schools.com/css/css_positioning.asp , position: relative is the most suited thing for it. but I don’t know why here under my example, it works like position: fixed.
As you mentioned

But there is a problem. Your images are not all the same size and the caption is positioned in a fixed position. It will display different based on the image size and proportions.

Why doesn’t it behave as it works under the simple post ( no smart list) ? for example here: https://tomatoheart.com/amardeep-singh/hidden-darker-reality-reliance-jio/ you can see with the code I written my first comment, the “image caption” always align itself with respect to the size and dimension of that particular why isn’t it possible with smart lists?

In fact, I remember how you have given me this code to align image caption in the bottom centre of each image under smart lists:

.td_smart_list_2 .td-sml-caption div{
position:relative;
top:-25px!important;
left:10px
}
.td_smart_list_2 img{
pointer-events:none;
}
.td_smart_list_2 .td-sml-caption div a{
color: #FFF !important;
background-color:rgba(0, 0, 0, 0.15)!important;
}

Please let me know if there is any possibility.

Thank you.

• This reply was modified 9 years by Nano.

Thank you Bogdan for the quick response. I totally understand this and hence won’t ask to devote any time of that.

But two things.

1. Let’s make it centre then. I don’t know why , but your previous code doesn’t work now 🙁
2. Or simply disable my customisation code for smart lists, so that I can have “under the image”caption for smart lists and “over the image” customisation for normal posts.

Thank you.

Okay. Thank you 🙂