Slider text options and image

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

2 Likes

Hi there, @user21789 :wave:

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?

1 Like

Hi :slight_smile: 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

2 Likes

Okay, I’ll check it with the devs and report back tomorrow :slightly_smiling_face:

2 Likes

Hi there, @user21789 :wave:

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 :slightly_smiling_face:

3 Likes

Nice thanks a lot for your help! :flexed_biceps: 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;
}
1 Like

Great! If anything else comes up, we’re always here to help :slightly_smiling_face: