Make start and end date the same size (Grid layout)

CSS Codes Event Calendar
1

Add this code to the Custom CSS field on the Style tab of your Event Calendar widget’s settings:

.eapp-events-calendar-grid-item-date .eapp-events-calendar-date-element-end .eapp-events-calendar-date-element-month {
  font-size: 13px;
  line-height: 14px;
}

.eapp-events-calendar-grid-item-date .eapp-events-calendar-date-element-end .eapp-events-calendar-date-element-day {
  font-size: 40px;
  line-height: 36px;
}

.eapp-events-calendar-grid-item-date .eapp-events-calendar-date-element-endContainer {
  margin-top: 0;
}

.eapp-events-calendar-date-element-divider {
  margin-top: 20px;
  width: 6px;
  height: 2px;
}

.eapp-events-calendar-date-element-end {
  margin-top: 0;
}

Guys, if this code was helpful to you, please drop a line in the comments. Your feedback helps us improve our services and provide better solutions :slightly_smiling_face:

1 Like
2

Any suggestions to modify this so the Month and Day are the same size for from and through, as well?

image
image339×113 3.77 KB

2 Likes
3

Hi there, @Capdisttheater_Moder :wave:

If you add this code, months will be the same size. To adjust the size of the days of the week, you should additionally paste this code to the Custom CSS field:

.eapp-events-calendar-date-element-dayOfWeek {
  font-size: 11px;
}

image
image858×893 63.8 KB


Check it out and let me know if it helped :wink:

2 Likes
4

A post was split to a new topic: How to make start and End date the same size in list layout