List view in mobile looks awkward

Ask the Community Customization
1

Hello,
The list view in mobile looks awkward, the image is too tiny and it is not a list in mobile view it is more of a “grid list”. And I think the contents should be center in mobile view.

Maybe it should look more like the actual Grid view in mobile or it should look like an actual list in mobile view too.

Maybe I can change the @media (min-width:) in css so that the list is still visible in mobile?

1 Like
2

@Ebba_Musikhuset You can use the CSS code to center event elements on mobile. Just add it to the Custom CSS field on the Appearance tab and let me know if it helped:

@media(max-width: 550px) {
  .eapp-events-calendar-list-item-info {
    justify-content: center;
  }
  
  .eapp-events-calendar-list-item-locationAndTime,
  .eapp-events-calendar-name-component {
    text-align: center;
    width: 100%;
  }
  
  .eapp-events-calendar-list-item-imageContainer {
    width: 100px;
    height: 100px;
  }
  
  .eapp-events-calendar-date-element-component {
    margin: 0 auto !important;
  }
}
2 Likes
3

This should be added on settings :smile:

Also do you have the CSS to center the venue type?

1 Like
4

Hey there :wave:

Really nice suggestion and we already have it in our Wishlist. You can vote for this request to follow all the updates.

As for the venue alignment, I’ve shared your request with our devs. I’ll let you know once the solution is provided :slightly_smiling_face:

5

Here is the code you can use:

@media (max-width: 480px) {
  .global-styles,
  .eapp-events-calendar-popup-location-content {
    text-align: center;
    width: calc(100% + 20px);
  }
}

Check it out and let me know how it worked :slightly_smiling_face: