Issue with Event Display on Website

[CIM_Hub]

• Issue description:
  Hello everyone,

I’m encountering a problem with the display of events on my website. I’ve set it up so that events are displayed at full width,

This works perfectly in most browsers. However, in Google Chrome, three events are sometimes displayed in a row, which causes the event titles to be partially cut off or not fully readable.

Does anyone have an idea how I can reliably limit it to two events per row

?

• Link to the page with the widget in question:
• Belegung vom CIM Hub - CIM Hub

[Rena (Renata)]

Hey @CIM_Hub, welcome to our friendly Community!

I’m glad to say that we have fixed the issue by setting up the max width for the widget to 800px. Now everything should work correctly.

Could you please let me know if this helped?

[CIM_Hub]

Thank you for your response!

I think your solution is great; however, the events are no longer aligned with the rest of the website. That’s not a big issue, but if there are any other solutions, I’d be happy to hear your suggestions!c

[Sina]

Hi @CIM_Hub

Set up Full width. You can try that

[CIM_Hub]

Yes, that’s correct, but then I face the issue I described above.

[Sina]

Do you have something in custom css?

[CIM_Hub]

Nope, nothing right now.

[Sina]

I think the word is too long. Because of the line break
Try it “Anpassung Klimawandel” or “Projekte Nachbarschaft” or “Projekte in der Nachbarschaft”

[CIM_Hub]

Thanks for your solution, but I can’t do that, because it’s the name of the Project.

[Sina]

otherwise you have to work with custom css

set up full width and copy this in the custom css section.
test it

@media (min-width: 768px) {
.eapp-events-calendar-list-events {
display: block !important;
column-count: 2;
}
}

column-count: 2 or 3

Rena followed this with a max width of 800px
This means that no 3 event blocks fit next to each other

[CIM_Hub]

It doesn’t work ;(

[Sina]

sorry you have a grid layout

@media (min-width: 768px) {
.eapp-events-calendar-events-calendar-layout {
display: block !important;
column-count: 2;
}
}

I have to test it myself first

[CIM_Hub]

Thank you, I think that worked, but now only one event is displayed per row… In the workspace area of the widget, it’s showing correctly, but on my website, it looks different. Weird.

[Sina]

have patience. @Rena or @Helga will offer you the right solution. Two blocks fit next to each other.
I’m not a CCS professional either

[Sina]

@CIM_Hub
What speaks against switching to List Layout and testing again?

@media (min-width: 768px) {
.eapp-events-calendar-list-events {
display: block !important;
column-count: 2;
}
}

[Helga]

@Sina, thank you so much for your help!

@CIM_Hub our developers have fixed the alignment issue with this CSS code (already added to your widget):

@media(min-width: 900px) {
  .eapp-events-calendar-grid-group
  .eapp-events-calendar-grid-component {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
  
  .eapp-events-calendar-grid-item {
    width: 100% !important;
  }
}

Let me know if you like the result

[CIM_Hub]

Many thanks! That’s the solution