Formatting events for mobile device
By Guest on Tuesday, 29 September 2015
Posted in JEvents (Free Access)
Replies 10
Likes 0
Views 7.6K
Votes 0
I'm using a custom layout to give me this Events List page on a PC:



When viewed on a mobile device it looks like this:



Is there an add-on to fix this please, if not what can you suggest?

Thanks,

Mike



PHP Version : 5.4.43

MySQL Version : 5.5.44-cll-lve

Fix jQuery? : Yes

Load JEvents Bootstrap CSS? : Yes

Load JEvents Bootstrap JS? : Yes

Max Input Vars ? : 1000

Club code set? : Yes  

Joomla : 3.4.4

component_com_jevents : 3.2.20

component_com_jce : 2.5.8

module_mod_jevents_cal : 3.2.20

module_mod_jevents_custom : 3.2.20

module_mod_jevents_filter : 3.2.20

module_mod_jevents_latest : 3.2.20

module_mod_jevents_legend : 3.2.20

module_mod_jevents_switchview : 3.2.20

layout_iconic : 3.4.5

layout_ruthin : 3.2.4

plugin_content_jevents : 3.2.20

plugin_finder_jevents : 3.2.20

plugin_jevents_jevcustomfields : 3.1.23

plugin_jevents_jevfiles : 3.0.13

plugin_search_eventsearch : 3.2.20
Does it work correctly in the standard Joomla! template?

Can you update the Iconic layout to 3.4.5 as we added some missing CSS.

Many thanks
Tony
Guest
·
Tuesday, 29 September 2015 13:26
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Tony

By standard Joomla template do you mean Atomic? I haven't tried changing the template because my site wouldn't work.

I have tried the default, geraint, iconic and ruthin layouts, with and without custom layouts enabled but the problem doesn't go away.

The date range menu item is appearing over the top of the jevprejevents header module instead of below it.

Mike
Guest
·
Tuesday, 29 September 2015 14:49
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello,

No I mean Protostar. Just add:

&template=protostar
or
?template=protostar

to your url that will change the website template.

Many thanks
Tony
Guest
·
Tuesday, 29 September 2015 21:51
·
0 Likes
·
0 Votes
·
0 Comments
·
I didn't know that!

Anyway it doesn't work with my web site's menu (maximenu ck), all I see is the home page header and footer.

Mike
Guest
·
Wednesday, 30 September 2015 08:44
·
0 Likes
·
0 Votes
·
0 Comments
·
This is fixed in the latest build of the Iconic layout and JEvents 3.4.0 - you need to add
<div class="jev_clear" ></div>

after the last </div> in the listevents_body.php and listevents_responsive.php files for the iconic range view
Guest
·
Wednesday, 30 September 2015 12:51
·
0 Likes
·
0 Votes
·
0 Comments
·
OK, I've upgraded Jevents to 3.4.0 and added the div to the two files specified but I still have the problem. I get it no matter what theme I use for the date range view.

Mike
Guest
·
Wednesday, 30 September 2015 14:17
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Mike,

Please send me or Geraint super user logins to take a look for you.

Thanks
Tony
Guest
·
Wednesday, 30 September 2015 22:50
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello,

This is actually caused by your custom module up top. You have set fixed properties:

style="margin: 5px auto 20px auto; border: 1px solid black; padding: 5px; height: 150px;"

I would advise removing this style. Adding a class to it like: .events_top and adding css as follows:



@media (min-width:468px) {

.events_top {margin: 5px auto 20px auto; border: 1px solid black; padding: 5px; height: 150px;}}



@media (max-width:467px) {

.events_top {margin: 5px auto 20px auto; border: 1px solid black; padding: 5px; height:100%;}}


To your JEvents Custom CSS.

I have actually gone and head and done this for you.

Many thanks
Tony
Guest
·
Thursday, 01 October 2015 21:29
·
0 Likes
·
0 Votes
·
0 Comments
·
Tony you are a star.

Thank you so much for fixing this even though it was my error! :oops:

Fantastic support.

Mike
Guest
·
Friday, 02 October 2015 08:45
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Mike,

You are very welcome.

Many thanks
Tony
Guest
·
Friday, 02 October 2015 19:40
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post