Event items are against each other when viewed on mobile

hekla wrote:

add white-space: nowrap; to #jem .jem-event-info

Code:

#jem .jem-event-info { margin-right: 15px; white-space: nowrap; }

I just saw that you use #jem .jem-event-info-small

So add the code to that class.

Can you be more specific?

with my css modifications it looks like this here:

That in your screenshot looks great.
Buit maybe I'm doing something wrong cause I don't get it like yours/
Is it correct to afd this to my The line about flex-wrap have tried with the /* a nd */ and also with flex-wrap: nowrap.
But in both ways the layout is not changing as in your screenshot/
I'm not a css expert, so what did I wrong?
Thanks for your patience and support.

I had a closer look at your css. From the current state, you only need this in your custom.css file below /* ===== JEM ===== */

#jem .jem-sort-small {
display: none;
}
.fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas {
display: none;
}
#jem .copyright {
display: none;
}
#jem .copyright {
display: none;
}
#jem .jem-event-info-small {
margin-right: 15px;
white-space: nowrap;
}
@media (max-width: 768px) {
#jem .jem-event-info-small {
width: 100%;
}
}
#jem .jem-list-row {
flex-wrap: wrap;
}

Thank you very much for the support.
Now it looks great