Move date field to a different place (grid view)

Ask the Community
1

Issue description:

Currently the date in the upper left corner hides important parts of the picture. I would like to move it to another place like in the black part below. An alternative could be to remove it completely and show the date besides the time, which wold make most sense to me.

Is there a way to achieves this with CSS?

Link to the page with the widget in question:

Thanks and cheers,
Kay

1 Like
3

I think I’ve nailed it!

.global-styles, .eapp-events-calendar-grid-item-date {
margin-left: 220px;
margin-top: 180px;
}

.global-styles,
.eapp-events-calendar-grid-item-info {
padding: 0px 30px 0px 0px!important;
}

Additional config:

  • background of date field: transparent
2 Likes
4

Oh, it works only on desktop this way. On mobile it looks different. I am not pro enough to fix this via CSS.

2 Likes
5

Hi there, @Bear and welcome to the Community!

You were really close, nice try :+1:

Here is a slightly adjusted solution from our devs. Try it out and let me know if you like the result :wink:

.eapp-events-calendar-grid-item-date {
  right: 0;
  left: unset;
  top: unset;
  bottom: 180px;
}

.eapp-events-calendar-grid-item-info {
  min-height: 200px;
}

.global-styles,
.eapp-events-calendar-grid-item-info {
  padding: 0px 20px 0px 0px;
}
2 Likes
6

I love it!
Many thanks to the devs.

Cheers,
Kay

3 Likes
7

No sweat :wink:

We are always here for you if anything else comes up :slightly_smiling_face:

1 Like