Mobile display for the layout LIST

Ask the Community Customization
1

Great tool, I love it! But unfortunately the display for the layout LIST is not ideal for mobile view. There ist too much of white space.

1 Like
3

Hi there, @Elmar_Vigl :waving_hand:

Thank you so much for the feedback!

Would you like to reduce the width of the event cards on mobile or maybe align event elements to the center to fill more space?

4

On the desktop website, the layout displays correctly as a list. However, on mobile, the text and graphics are stacking vertically. This causes the event graphic to stretch into a square. Please ensure that the text and graphics remain aligned in a single row on mobile, just like on the desktop version.

1 Like
5

Got it, thanks!

Our devs will gladly customize the widget for you. I’ve passed your request on to them and will update you once it’s done :wink:

6

Perfect, thank you!

1 Like
7

You’re welcome!

While you’re waiting for the solution from the devs, we’d like to invite you to participate in our new contest, where you can win a 6-month extension for your subscription - February Contest: Guess What’s Missing in Our Photo and Win 6 Months FREE! :wrapped_gift:

Check the details and join in :wink:

8

Hi there, @Elmar_Vigl :waving_hand:

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


@media(max-width: 600px) {
  .eapp-events-calendar-list-item-info {
    justify-content: center;
  }

  .eapp-events-calendar-list-item-infoInner {
    align-items: center !important;
  }

  .eapp-events-calendar-list-item-mobile .eapp-events-calendar-list-item-date {
    align-self: center;
  }

  [class*='eapp-events-calendar-calendar-header-container '] {
    display: flex;
    justify-content: center;
  }

  [class*='eapp-events-calendar-calendar-header-button'] {
    display: flex;
    justify-content: center;
  }

  .eapp-events-calendar-button-link .es-button-base-overlay {
    padding: 0px !important;
  }
}

@media(max-width: 500px) {
  .eapp-events-calendar-date-element-component {
    margin: 0;
    margin-bottom: 20px;
  }

}

@media (max-width: 480px) {
  .eapp-events-calendar-time-time {
    font-size: 10px;
  }

  .eapp-events-calendar-list-item-locationAndTime {
    margin-top: 4px;
  }
  
  .eapp-events-calendar-list-item-component,
  .eapp-events-calendar-list-item-info {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  .eapp-events-calendar-list-item-name,
  .eapp-events-calendar-date-element-day {
    font-size: 13px !important;
  }

  .eapp-events-calendar-category-item,
  .eapp-events-calendar-date-element-month {
    font-size: 10px !important;
  }

  .eapp-events-calendar-list-item-imageContainer {
    height: 36px !important;
    width: 36px !important;
    margin: 0 !important;
  }

  .eapp-events-calendar-list-item-component {
    gap: 4px;
    padding: 10px !important;
  }

  .eapp-events-calendar-list-item-date {
    min-width: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: -18px 0px -18px -10px !important;
    height: 100px !important;
  }

  .eapp-events-calendar-list-item-component,
  .eapp-events-calendar-list-item-infoContainer {
    align-items: center !important;
  }

  .eapp-events-calendar-list-item-button {
    margin: 0 !important;
  }

  .eapp-events-calendar-date-element-start {
    height: auto !important;
    width: auto !important;
  }

  .eapp-events-calendar-list-item-infoInner>div {
    text-align: left !important;
    width: 100% !important;
  }

  .eapp-events-calendar-list-item-infoInner {
    margin: 0 8px !important;
  }

  .eapp-events-calendar-list-item-component {
    position: relative;
  }
}

.eapp-events-calendar-list-item-component {
  margin: 0;
}
9

It works! And it’s looks fantastic! THANKS!!!

2 Likes
10

Perfect, you’re very welcome!

Feel free to contact us here again in case of any questions. We’ll be more than happy to help :blush:

11

In the meantime, we’d like to invite you to participate in our new contest, where you can win a 6-month extension for your subscription - February Contest: Guess What’s Missing in Our Photo and Win 6 Months FREE! :wrapped_gift:

Check the details and join in :wink: