Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
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
  • Page:
  • 1
  • 2

TOPIC:

Event items are against each other when viewed on mobile 3 months 1 week ago #30809

Hi,
Recently I was advised on this forum to set the responsive display to a 1 horizontal line by entering something in that field.
That works well.
But when I view it on a mobile phone there is no space between the items. They stand against each other.
And in the JEM demo the items are aligned to the top left and in my site they are not
Can I solve both issues with css and if so how?
Kind regards,
Wouter
Attachments:

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

Last edit: by WoodyF4u.

Event items are against each other when viewed on mobile 3 months 6 days ago #30810

Please give more details: which template (cassiopeia?) which JEM responsive template style (with empty tablewidth or not / mobile landscape or portrait...)
I can't reproduce

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

Last edit: by jojo12.

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

  • hekla
  • hekla's Avatar
  • Offline
  • Platinum Member
  • Platinum Member
  • Posts: 404
  • Thank you received: 192
Hi Woody,

thank you for your report: I will check it out.

for a quick fix you can add some css:

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

and add
@media (max-width: 768px) {
    #jem .jem-event-info {
        width: 100%;
   }
}
(or take an other breakpoint)

Does this help?

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

Last edit: by hekla.

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

No I'm sorry.
I have added the css but it didn't solved my issue.
You can see it at: marc-alberto dot com
Kind regards,
Wouter

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

Last edit: by WoodyF4u.

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

  • hekla
  • hekla's Avatar
  • Offline
  • Platinum Member
  • Platinum Member
  • Posts: 404
  • Thank you received: 192
You have to comment out /* flex-wrap: wrap; */ in
#jem .jem-list-row {
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    justify-content: flex-start;
}

And then you need some styling for this view to separate the events from eachother, like e.g in you custom.css file add
@media (max-width: 768px) {
	#jem .eventlist li {
	padding: 10px 0;
	border-bottom: 1px solid #ccc;
   }
}

or similar

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

Last edit: by hekla.

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

Thanks it is a bit better now.
But do you know if it is possible to start every row akigned top left?
Now it is vertically centered.

And is it possible to use specific width for the columns.
Cause now on a mobile telephone every data in a row starts at a different place which make it a bit messy.
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.247 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.

Follow us......