Hi Raul,
Try to follow the steps below:
1). Add this CSS:
.wp-caption-text.thumb-caption-text {
position: absolute;
bottom: 0;
top: 0;
padding-top: 24%; /*adjust this number*/
width: 100%;
}
.thumb-caption {
position: absolute;
bottom: 0;
width: 100%;
top: 0;
right: 0;
}
2). Disable writing-mode: vertical-rl;
and transform: rotate(180deg);
from your previous CSS since it looks better when it’s displayed horizontally on overlay.
.thumb-caption-text {
writing-mode: vertical-rl;
transform: rotate(180deg);
margin-bottom: 0;
color: #fff;
background-color: red!important;
}
3). Disable padding: 20px!important;
from this CSS:
* .inside-article p.thumb-caption-text {
padding: 20px!important;
background-color: rgba(0, 0, 0, 0.35)!important;
background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0.5)))!important;
background: linear-gradient(
0deg
, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 100%)!important;
font-size: 16px;
Let me know 🙂