JEM Responsive started as an override to enable mobile usage for JEM because the old table layout is static. So JEM Responsive started with the vision that it should integrate as much as possible to the design of your template and should be responsive as possible for better mobile usage. After some releases of the override we decided to integrate it officially to JEM.

Caused that JEM Responsive started as an override, it does not have full support for all settings of JEM and some features have to be configured via module or page class suffix.

View: Simplelist (and similar list-views)

JEM Responsive introduces two new layouts to the Simplelist view. One layout tries to rebuild the default table but as responsive as possible. The other layout is a complete new layout that looks modern and is also responsive. Both layouts are shown in the picture below: table rebuild on the left, new layout on the right site.

You can change between both layouts in the settings: Go to Components → JEM → Settings → Layout → "Table Width in %". If this field is empty, the modern look is used if you input some percentage value like "100" then the table-like layout is used and you can change the width of the table. Only if you use the table-like layout, the other "Column Width"-fields will take an effect. If you use the modern layout, you can only turn columns on and off (no width setting). A word to the column widths: by default (all width fields empty) JEM Responsive uses automatic column widths in the table-like layout but you can change that using those "Column Width"-fields. You can also just set one column fixed (e.g. 100px) and all other fields empty and it would work.

Module and Page Class Suffix

As written at the beginning, some settings have to be used via page or module class suffix. In the following table you can see where you can use which page or module class suffix.

Description:

jem-imagewidth<width>px and jem-imageheight<height>px: Use that suffix at a menue item at a module to resize the images in list views. With just jem-imagewidth<width>px the image has automatic height. Example for page suffix: "jem-imagewidth200px" remains in 200px width images. Or you use percentage values: "jem-imagewidth100%".

jem-filterbelow, jem-hidefilter and jem-showfilter: Use that page suffix to force hiding/showing filter and to set the filter below the eventlist per page.

jem-tablestyle: Use this module class suffix to use the table-like layout in the module instead of the modern list view.

jem-notitle, jem-novenue, jem-nocity, jem-nostate, jem-nocats, jem-noimageevent, jem-noimagevenue: Add one of the tags to module class suffix to hide the related item. Not all tags work in the modern layout but in the table-like layout and also not in all modules... Just try :)

jem-horizontal: Switch between a horizontal and vertical layout (default is vertical).

jem-imagetop: You can move the image at the top of the banner module (if no calendar is shown, otherwhise its below calendar) via module suffix "jem-imagetop".

The JEM Teaser Module has another special functionality. If you set maximum description length to 1208, the Teaser Module will not filter your Event description. The whole description will be shown as you have been written. You can use the read more functionality of Joomla to show more text in the event detail view.