Slider text options and image

Ask the Community Customization
1

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

possible
possible770×1410 118 KB

2 Likes
3

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?

image
image344×540 56.4 KB

Also, do I understand right that you’d like to apply this change to the mobile version only?

1 Like
4

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
5

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

2 Likes
6

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
7

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
8

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