Responsive CSS & hiding modules

I have used the notablet nomobile class suffix in various modules and its working except for two situations...

I don't know if that's because of the module position or the modules themselves.

The positions are "search" & "header"
The module types are "custom_html (the suffix works fine in other positions)" & "frontpage slide show (joomlaworks)", respectively.

If you want the url I'll have to PM you the url for security & SEO reasons. Thanks!

Hello,

Most probably it is connected with fact that these module positions uses "none" chrome module style, what cause that the suffix isn't added to the module.

Is there a way to overcome that problem?

Thanks for the reply!

In my opinion you should hide these elements directly in the CSS: tablet.css or mobile.css using:

Code: Select all

#elementID {
    display: none;
}


Hmmm... Ok, I'll try that & let you know. Seems legit... Thanks!

Ok! Works like a charm, thanks!

Please what is the #elementID.

Please help

Thanks

#elementID is an example - you should replace elementID with ID of the element to hide. In example if you want to hide the element with ID gkHeader you have to use "#gkHeader"

Thanks for the response but I think my issue is even bigger than I thought. I just noticed that the template is not really responsive. Mobile devices do not seem to switch to the mobile version. In other words, on mobile devices, it still uses template.css settings. It doesnt seem to recognise or load the mobile.css file on mobile devices.

If I turn on css overide on the template, both desktop and mobile devices show the mobile version of the site. There is something wrong. Please help

Edwin

Please check in the Layout tab if you have set proper widths for the specific mobile/tablet breakpoints and please check in the RWD layout is enabled.

Please check in the Layout tab if you have set proper widths for the specific mobile/tablet breakpoints and please check in the RWD layout is enabled.

1. There is no place to specify widths for the mobile/tablet in the layout tab

2. How/Where do I check in the RWD layout is enabled?

Are you sure? Please look at the attachment.

Are you sure? Please look at the attachment.

Ok, my fault. I am in the wrong template. I use a world news II template for Joomla 3

In this case the mentioned options are not available, because TWN II is a non-responsive template.

If you need to hide something on specific width, then you have to wrote your own media queries.

In this case the mentioned options are not available, because TWN II is a non-responsive template.

If you need to hide something on specific width, then you have to wrote your own media queries.

Please are there any guides or tutorials on how to do that? I didnt know TWN II is a non responsive template. I wouldnt have used it. That puts me in a serious dilemma now! And my site is live already with it. I cant change it now because it would really make me look silly. I thought all your Joomla 3.0 templates were responsive templates. This is really not cool

I would appreciate any leads or tips.

Regards

It will be a big problem, because the template structure is not prepared for the responsive layout. You can try to work with media-queries: https://developer.mozilla.org/en-US/doc ... ia_queries (put it in the override.css file - please remember to enable it in the template settings).