hiding modules based on screen size Topic is solved

[erkbiz]

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]

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?

[Per Yngve Berg]

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

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

[erkbiz]

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]

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?