hiding modules based on screen size Topic is solved

General questions relating to Joomla! 3.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Post Reply
erkbiz
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Tue Feb 24, 2009 4:02 pm

hiding modules based on screen size

Post by erkbiz » Tue May 11, 2021 7:19 pm

Hello,

I am designing for several different screen sizes and want to hide a module when the site is launched from a small screen, (e.g. a phone). I am on Joomla 3.9 and am using template toaster 8.0 as my template design tool which supports bootstrap 4.

I have read on multilple posts about boostrap being able to hide modules when the Module Class Suffix Field, found under the advance tab of the module I want to hide, is filled in with a statement recognized by bootstrap, (see below). I also have read that if a snippet of CSS is added to the CSS file it is possible to hide a module, (see below). On many of these posts it appears this works for some people, it is not working for me.

The bootstrap CSS file is part of the import of my template, I have verified it is included with the template.

I have added the following string to the module's class suffix field and have added the suggested CSS to my template CSS file. Nothing works.

If you have had success hiding modules using these techniques, or if you have had success using another method please let me know.......Thanks!

string added to module's class suffix
hidden-mobile

CSS added to CSS file
@media screen and (max-width: 787px) {
.hidden-mobile {
display:none;

illovo
Joomla! Intern
Joomla! Intern
Posts: 50
Joined: Sun Jan 13, 2013 9:30 am
Contact:

Re: hiding modules based on screen size

Post by illovo » Tue May 11, 2021 11:46 pm

If you are sure that the module has the class="hidden-mobile" (check with browser inspector!). It depends sometimes on the module style (e.g. html5) if it's set or not:

Your Css code looks wrong (missing brackets). It must be:

Code: Select all

@media screen and (max-width: 787px) {
    .hidden-mobile {
	   display:none;
    }
}
Also check in the browser inspector if your CSS rule is overriden by another one!

If yes try:

Code: Select all

display:none !important;
Did you delete browser caches?

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 27814
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: hiding modules based on screen size

Post by Per Yngve Berg » Wed May 12, 2021 7:36 am

"hidden-phone" works with Bootstrap 2. May be different in 4

https://getbootstrap.com/docs/4.6/utili ... g-elements

erkbiz
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Tue Feb 24, 2009 4:02 pm

Re: hiding modules based on screen size

Post by erkbiz » Wed May 12, 2021 5:24 pm

Thanks for the replys but I found why this wasn't working. I examined the page source and saw that template toaster tool inserted a string in the class definition which concatenated onto my class suffix. When I added several leading spaces to the Module Class Suffix Field it broke the concatenation and it worked!

JohnSmithers
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 227
Joined: Mon Feb 11, 2013 9:22 am

Re: hiding modules based on screen size

Post by JohnSmithers » Thu May 13, 2021 1:15 pm

On something similar....

I have an instruction for people using mobile phones to select "desktop version" on their mobiles for a better experience. This instruction is included as a "mobilenotice" module and displays with the following styles:

Code: Select all

 @media screen and (max-width: 471px) {
   .mobilenotice {
  display: inline;
  text-align: justify;
}
}
This works well except that when the "desktop version" of mobile is selected I still see this "mobile notice".

Is there a way to remove this on a desktop version of a phone browser?


Post Reply

Return to “General Questions/New to Joomla! 3.x”