TOPIC:

Event items are against each other when viewed on mobile 3 months 5 days ago #30822

hekla Offline Platinum Member Posts: 404 Thank you received: 192	hekla wrote: add white-space: nowrap; to #jem .jem-event-info #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.
	Please Log in or Create an account to join the conversation.

Event items are against each other when viewed on mobile 3 months 5 days ago #30823

hekla Offline Platinum Member Posts: 404 Thank you received: 192	Can you be more specific? with my css modifications it looks like this here: Attachments:
	Please Log in or Create an account to join the conversation.

Event items are against each other when viewed on mobile 3 months 5 days ago #30825

WoodyF4u
Topic Author
Offline
New Member
Posts: 9
Thank you received: 0

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

#jem .jem-event-info {
    margin-right: 15px;
    white-space: nowrap;
}
@media (max-width: 768px) {
    #jem .jem-event-info {
        width: 100%;
   }
}
#jem .jem-list-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
@media (max-width: 768px) {
	#jem .eventlist li {
	padding: 10px 0;
	border-bottom: 1px solid #ccc;
   }
}

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.

Kind regards,
Wouter

Please Log in or Create an account to join the conversation.

Event items are against each other when viewed on mobile 3 months 5 days ago #30826

hekla
Offline
Platinum Member
Posts: 404
Thank you received: 192

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;
}

The following user(s) said Thank You: WoodyF4u

Please Log in or Create an account to join the conversation.

Event items are against each other when viewed on mobile 3 months 4 days ago #30830

WoodyF4u Topic Author Offline New Member Posts: 9 Thank you received: 0	Thank you very much for the support. Now it looks great Kind regards, Wouter
	Please Log in or Create an account to join the conversation.

Page:
1
2

Forum

JEM - an Event Manager for Joomla

JEM 4.x for Joomla 4 Community Support

Event items are against each other when viewed on mobile

Time to create page: 0.255 seconds

Downloads

Donate

If you find JEM useful and if you use it on your site, please consider a donation to the project.

Private Messages

You are not logged in.