Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1


[HOWTO] Simple Responsive JEM Event Page 4 years 10 months ago #25201

I like the current JEM screen layouts with the exception of the event detail page. These work great on a desktop screen but are too scrunched up to be viewed with a phone. I’m fine with the single category list as is – not great on a small phone without turning horizontal, but still usable (only looses city/state

I found that I just needed a few small changes to the jem.css file to fix the event page problem. I only had to change the sections related to dt, dd and flyerimage to affect changes to the event detail page. I commented out the current code and added two new versions of each section controlled by screen size (@media only all and (max-width: xxxx)).

A copy of my modified CSS file is attached. I use it as an override loaded in the httpdocs\templates\[your template]\css\com_jem folder. Be sure to remove the.txt extension before copying to your template folder - had to add that to get it to upload.

To make a long story short, these few changes gave me a version of the original JEM that is “responsive” enough for my needs. To see how it performs on my site, visit:


As an alternative, you can look at Egnarts’ Responsive JEM. It has so much more functionality than what I’ve done. I just don’t need all that it can do for my site. Hope this might be helpful to someone else.
The following user(s) said Thank You: ernst67

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

Last edit: by hstringer.
  • Page:
  • 1
Time to create page: 0.373 seconds


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......