Joomla Templates Club 406,261 posts

[mortenrasmussen Friend mortenrasmussenJoin date: October 2010Posts: 78Downloads:0Uploads:19 Thanks: 11 Thanked: 5 times in 1 posts]

#195383

Hi,

Is it possible in JA Wall to control wehther a module shows on mobile and tablet devices?

Like in many other templates you have the classe “hide_mobile hide_tablet show_all” etc. Are there similar ways to control the module visibility in JA Wall?

Kind regards, Morten

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#525163

Hi Morten,

JA Wall does not support it by default.
Though, you can get the bootstrap responsive utility http://getbootstrap.com/customize/?id=9339736 (on select Responsive utilities). Then you can get the css like this.

Copy and paste it into the ja_wall/css/template.css file:

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
display: none !important;
} @media (max-width: 767px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
} @media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
} @media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}
table.visible-md {
display: table;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
} @media (min-width: 1200px) {
.visible-lg {
display: block !important;
}
table.visible-lg {
display: table;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
} @media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
} @media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
} @media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
} @media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}

You now can use hidden-sm, hidden-md …. as in this document.
http://getbootstrap.com/css/#responsive-utilities

Hope it helps.

1 user says Thank You to Wall Crasher for this useful post

1. mortenrasmussen

[mortenrasmussen Friend mortenrasmussenJoin date: October 2010Posts: 78Downloads:0Uploads:19 Thanks: 11 Thanked: 5 times in 1 posts]

#525768

Where should I use the classes to show/hide modules then – in the module class suffix in module settings?

I tried to enter ” hidden-xs” in module class suffix in the module settings to hide a module on mobile devices, but that did not do anything.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#526034

I have added css style suggested by @wall Crasher here

The module is hidden in mobile layout successfully. See these screenshot for reference:

+ Back-end configuration:

+ Front-end site:

If you still need help on this, you can pm me URL of your site, admin login and FTP credentials of your hosting. I will help out.

---

Attachments:

1. 
2. 

[mortenrasmussen Friend mortenrasmussenJoin date: October 2010Posts: 78Downloads:0Uploads:19 Thanks: 11 Thanked: 5 times in 1 posts]

#526094

Yes, thats’s how it was supposed to work, I know. But the thing is that when I set the visibility rules in module class suffix it does not affect the output. See attached images.

The rule is set in the module but it has not been set on the page as you can see.

This is what I am asking for help to sort out why.

---

Attachments:

1. 
2. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#526194

Could you pm me URL of your site and admin login? I will help to check further.

[mortenrasmussen Friend mortenrasmussenJoin date: October 2010Posts: 78Downloads:0Uploads:19 Thanks: 11 Thanked: 5 times in 1 posts]

#526288

Hmm … it seams to work on all other module positions than the search-position. I therefore looked for another way around this and I entered the visibility rules in the module position in index.php instead (created different positions with different rules). I know this is a bit clumsy solution but for now it did the job.

[Author]

Posts