overlaid mobile view

[wei]

We also ran into other issues that concerned with mobile interface. So if you use your phone and go to site https://yorkshirebakingclub.com/event/family-fun-baking-event/2018-06-30/
The title is cut off as showed in the image. (https://theeventscalendar.com/content/uploads/2018/04/94e4bbab2214fc6b.png)

Then if you go to https://yorkshirebakingclub.com/event/family-fun-baking-event/all/
The “Find out more” link is also covered by the booking button which is not ideal at all.. (https://theeventscalendar.com/content/uploads/2018/04/2b4ff5fff5107c62.png)

Please do you have a solution for these?

Thanks.

[Jeremy]

Hi wei,

Thanks for reaching out to us! I would be happy to help you 🙂

Your theme adds some styles which breaks our calendar a little bit.

In order to fix the first issue, head to Appearance > Customize > Additional CSS and paste the following code:

.fusion-events-featured-image .fusion-events-single-title-content {
    position: inherit;
}

To fix the second issue, you may try the following code (style in Additional CSS):

@media screen and (max-width: 800px) {
  .tribe-events-list .fusion-tribe-has-featured-image {
    display: flex;
    flex-direction: column;
  }
  #tribe-events .tribe-events-list .tribe-events-event-cost {
    position: inherit;
    order: 3;
  }
  .tribe-events-list .fusion-tribe-primary-info {
    order: 1;
  }
  .fusion-tribe-secondary-info {
    order: 2
  }
}

Please do let me know if that worked for you.

Cheers,
Jeremy

[wei]

Thank you for your help, Jeremy! This has effectively solved the issue. Have a nice day! 🙂

[Jeremy]

Hi Wei,

I’m glad that snippet solved your issue!

I’m going to close this thread then, but feel free to open a new one if you have further questions or concerns.

Have a nice day too 😉
Jeremy

[Author]

Posts