Public Forums 71,145 posts

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#195074

I have a dual language site and have two seperate home pages for each language and envirnement desktop and mobile respectivly.

I have modules I want visible on desktop but not for mobile. Since hidding modules with something like “visible-lg” does not work for some reason, I made a copy of each menu item, one for desktop, one for mobile, hidding the ones I wanted only for mobile in template manager->template->megamenu and assigned the modules I wanted for mobile to the respective mobile menu items. This is a bit complicated but it works except for the home pages.

On mobile the default homepage always shows with the wrong (desktop) module.

If I set the mobile version of the home menu item as default, this will show on the desktop, eventhough it should be hidden on desktop.

How can I have one default home for desktop and another for mobile?

This is really bothering me. Getting modules hidden would be simpler but alas this does not want to work here. Although it does work on a virgin version of stable. But I would rather not have rebuild the whole page again.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#524081

Please have a look at this documentation page of this Purity III template: http://www.joomlart.com/documentation/purity-iii/layout-in-details#layout-configuration. In template manager > Layout tab > navigate to Responsive Layout tab, you can hide the module position you don’t want to show in mobile view.

If it doesn’t help, you can use some CSS rule to hide. You can post your site’s URL here and tell me the module you want to hide, I will have a look.

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#524109

Thank you for that.
It is not the module position I want to hide Menus or modules (or both).

Hiding menus does not work on stable. It works on developer.

And I want to set a different hoem page (startpage) for deektop and mobile!!
The stratup page for mobile always goes to the default menu set for that language. I want a different startup page for mobile, not the default.

Here is the link:
http://www.taxiinterlaken.ch/Test/

The top module on the sidebar-2 position (right) should be visible in mobile but invisible in desktop. and the second module on sidebar-2 should be visible in desktop and not visible in mobile.
I have tried: hidden-lg, visible-lg. Nothing works.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#524201

<blockquote>And I want to set a different hoem page (startpage) for deektop and mobile!!</blockquote>

This template is responsive by default, thus when viewing in mobile, it will hide some blocks/ positions. It will need pretty much customisation to have different homepage for desktop and mobile.

<blockquote>The top module on the sidebar-2 position (right) should be visible in mobile but invisible in desktop. and the second module on sidebar-2 should be visible in desktop and not visible in mobile</blockquote>

You can try to add class suffix to each module and use Media jQueries which will help to set special CSS according to certain device screen resolution. Here are some tips:

http://css-tricks.com/css-media-queries/
http://webdesignerwall.com/tutorials/css3-media-queries
http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/

For example, I add a class suffix named test into a module in sidebar 2 position. If I want to hide this module in mobile, I add this CSS rule into /templates/ja_purity/css/custom.css

@ media (max-width: 768px) {
.t3-sidebar-2 .t3-module.module.test {
display: none;
}
}

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#524292

Ok, I understand in principle. (Not a coder 😉 )

So I want to hide this module: DJ-ImageSlider Gallery Ausflug on mobile and hide this module: Slideshow CK Ausflug on desktop.

I have tried with “hidden-lg” and “visible-lg” in class suffixes but they don’t work as they should.

So, what would the ccs be?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#524383

First of all, you should add a space before the class suffix name in module settings then customize CSS rule in this file: /templates/purity_iii/css/custom.css.

For example, if you want to hide a module with class suffix hidden-lg in mobile view, you add this rule:

@media (max-width: 768px){
.t3-module.module hidden-lg {
display: none;
}
}


When hiding module in larger screen size, you set rule for minimum width (instead of maximum width in mobile)

[Author]

Posts