Hello, in the slider option, how can I move this text box down as shown on this image? So it should be over the picture.
Best regards
Hello, in the slider option, how can I move this text box down as shown on this image? So it should be over the picture.
Best regards
Hi there, @user21789
Do you want to keep the same size of the image or it should be increased? Would you like to keep the blue container or it should be completely removed?
Also, do I understand right that you’d like to apply this change to the mobile version only?
Hi Yes image keep same size. And I would like to remove blue container if possible, if not than move it to the bottom. If also possible it will be perfect on both mobile and pc. Thanks
Okay, I’ll check it with the devs and report back tomorrow
Hi there, @user21789
We’ve added this code to the Custom CSS field on the Style tab of your widget’s settings:
.eapp-events-calendar-slider-item-component {
background: transparent;
}
.eapp-events-calendar-slider-item-inner {
position: absolute;
bottom: 0;
width: 100% !important;
justify-content: center;
max-width: 470px;
}
.eapp-events-calendar-slider-item-inner * {
text-align: center
}
.eapp-events-calendar-slider-item-info {
width: 100%;
padding-bottom: 20px;
align-items: center;
}
.eapp-events-calendar-slider-item-imageContainer {
width: 50%!important;
transform: translateX(-50%);
}
@media screen and (max-width: 640px) {
.eapp-events-calendar-slider-item-component {
background: transparent;
}
.eapp-events-calendar-slider-item-inner {
position: absolute;
right: unset;
left: 0;
bottom: 0;
width: auto !important;
max-width: unset !important;
}
.eapp-events-calendar-slider-item-imageContainer {
width: 100% !important;
transform: none;
}
.eapp-events-calendar-slider-item-inner * {
text-align: start
}
.eapp-events-calendar-slider-item-info {
align-items: start;
}
}
Please check it out and let me know if you like the result
Nice thanks a lot for your help! I will try run with that.
I (AI) have added some gradient under the text… here is the code if someone needs.
.eapp-events-calendar-slider-item-component {
position: relative;
background: transparent;
overflow: hidden; /* Prevents overflow */
}
.eapp-events-calendar-slider-item-component::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50%; /* Adjust to control gradient size */
background: linear-gradient(to top, rgba(0, 0, 0, 5), transparent);
z-index: 2; /* Ensures gradient is above image */
pointer-events: none;
}
.eapp-events-calendar-slider-item-imageContainer {
position: relative;
width: 100% !important;
max-width: 470px; /* Optional */
overflow: hidden;
}
.eapp-events-calendar-slider-item-imageContainer img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
/* --- Positioning Text Over the Image at the Bottom --- */
.eapp-events-calendar-slider-item-inner {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 470px;
text-align: center;
color: white; /* Ensures readability */
padding: 0px;
z-index: 3; /* Places text above the gradient */
}
.eapp-events-calendar-slider-item-inner * {
text-align: left;
}
Great! If anything else comes up, we’re always here to help