nomobil, notablet suffix can't get them to work

Hi

I tried to follow some of the other threaths in forum about nomobil, notablet suffix bug in templates, but can't get it to work in StartUp.

In template.css I find:

Code: Select all

/* tablet/mobile suffixes */
.notablet {
   display: none;
}
.nomobile {
   display: none;
}
.onlytablet {
   display: none;
}
.onlymobile {
   display: none;
}

I tried to follow this:
https://www.gavick.com/forums/fashion-j ... 23718.html
And insert:

Code: Select all

/* tablet/mobile suffixes */
.notablet {
    display: block;
}
.nomobile {
    display: block;
}
.onlytablet {
    display: block;
}
.onlymobile {
    display: block;
}

@media only screen and (min-width:720px) and (max-width: 985px) {
.onlytablet {
    display: block;
}

.notablet {
    display: none;
}
}

@media only screen and (max-width:719px) {
.nomobile {
    display: none;
}

.onlymobile {
    display: block;
}
}

I have two modules:
1) that I would like to show on computers and tablets.
2) that should only be shown on mobil.

1) has suffix .nomobile
2) has suffix .onlymobile

Both modules are shown on my computer?

Whats wrong?

Could You provide an URL to your site?

Could You provide an URL to your site?

Sorry, but it's not public yet.

Ok, Ill try to desctibe it how it all works.
1. Please enable override.css in template settings. This will help us a little bit.

Now after override.css is enabled You have 3 stylesheets that You could use:
override.css (devices with screen width wider than 920px)
tablet.css (devices with screen width between 580 and 920px)
mobile.css (devices with screen wider than 580px).

If You would like to create a module that shows only on tablets and mobiles, add a suffix to this module (eg nodesktop), than in override.css add:

Code: Select all

.nodesktop {display: none;}


and in tablet.css and mobile.css:

Code: Select all

.nodesktop {display: block;}


How it works - first override.css is loaded and display none is attached to element. If You are on desktop 2 other css files doesnt load, so element stays hidden.

Now if You are on "tablet" or "mobile" (screen width is less than 920 or 580px) other css files are loaded and element is shown.

If an element needs to be shown on all devices, do not add any suffix.

If an element needs to be shown only on desktop, than add an suffix to it (eg. onlydesktop), then in override.css

.onlydesktop {display: block;}

tablet.css:

Code: Select all

.onlydesktop {display: none;}


mobile.css:

Code: Select all

.onlydesktop {display: none;}


Hope this will help.

Hi

It helped me!
I had to do some changes to template.css too, before it worked.

Two modules with "Module Class Suffix : ' only-desktop-tablet' and ' onlymobile'
(remember the little space)

override.css

Code: Select all

.only-desktop-tablet { display: block; }

mobile.css

Code: Select all

.only-desktop-tablet { display: none!important; }

tablet.css

Code: Select all

.only-desktop-tablet { display: block!important; }

template.css had to add .box in front of all the tablet/mobile suffixes, otherwise it would not work on smartphones.

Code: Select all

/* tablet/mobile suffixes */
.box.notablet {
   display: none;
}
.box.nomobile {
   display: none;
}
.box.onlytablet {
   display: none;
}
.box.onlymobile {
   display: none;
}