Adjust height of events

Ask the Community Customization
1

I can adjust the width of the events but if I bring it in to where the text ends, the event box becomes a rectangle that’s too tall in the container. So, what I wish: to hide the blank space to the right of the event info but keep the height of the event box. Thanks.

2 Likes
3

Hello there, @user27208 :waving_hand:

Happy to say that it’s possible to achieve this using the code below:

@media (min-width: 480px) {
  .eapp-events-calendar-list-item-component {
    width: fit-content;
  }
  
  .eapp-events-calendar-list-item-infoInner {
    flex-basis: fit-content;
  }
  
  .eapp-events-calendar-list-item-info {
    gap: 20px;
  }
  
  .eapp-events-calendar-list-item-component {
    flex-direction: row;
  }
  
  .eapp-events-calendar-date-element-component {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
    position: relative;
    margin: -20px 20px -20px -20px;
    width: 85px;
    border-radius: 0 !important;
  }
  
  .eapp-events-calendar-list-events {
    align-items: center;
  }
  
  .eapp-events-calendar-events-calendar-component,
  .eapp-events-calendar-events-calendar-header,
  .eapp-events-calendar-events-calendar-layout,
  .eapp-events-calendar-layout-container,
  .eapp-events-calendar-list-component,
  .eapp-events-calendar-list-item,
  .eapp-events-calendar-list-events {
    width: fit-content;
  }
  
  [class*="WidgetBackground__ContentContainer-sc"] {
    display: flex;
    justify-content: center;
  }
}

Please add it to the Custom CSS field on the Style tab of your widget’s settings and let me know if you like the result :slightly_smiling_face:

1 Like