onlytablet suffix does not seem to work

Hi,

If I apply the "onlytablet" suffix to a module (in this case in the mainbody position) it makes the module disappear in all 3 display modes...Have tried on desktop, Ipad and iphone...

Dave

Hi, probably you didn't add space before suffix name. Please try this " onlytablet".

Additionally please remember that suffixes like " onlytablet" depends from browser width not the device. So if you have a browser which loads with tablet.css then it will show the module with this suffix even if it is a desktop/tablet/mobile device.

Hi, probably you didn't add space before suffix name. Please try this " onlytablet".

Space is there...Was the first thing I checked....

D

Additionally please remember that suffixes like " onlytablet" depends from browser width not the device. So if you have a browser which loads with tablet.css then it will show the module with this suffix even if it is a desktop/tablet/mobile device.

I have two GK Image Show modules in the mainbody position. One, non responsive with notablet suffix and the other with onlytablet suffix which is responsive (both have space at the start)..

I have tested this on Desktop 1900px wide, an actual Ipad2 and an Iphone..

Dave

http://www1.aerosolpalnet.com/site5

You're right - now I see the problem - after testing this feature we have changed the order of the CSS files, what cause that now in the tablet.css and mobile.css should be placed more specific selectors. Please change in the both files (tablet.css and mobile.css) this code:

Code: Select all

.notablet {
   display: block;
}

.nomobile {
   display: none;
}

.onlytablet {
   display: none;
}

.onlymobile {
   display: block;
}


to:

Code: Select all

.box.notablet {
   display: block!important;
}

.box.nomobile {
   display: none!important;
}

.box.onlytablet {
   display: none!important;
}

.box.onlymobile {
   display: block!important;
}


You're right - now I see the problem - after testing this feature we have changed the order of the CSS files, what cause that now in the tablet.css and mobile.css should be placed more specific selectors. Please change in the both files (tablet.css and mobile.css) this code:

Code: Select all

.notablet {
   display: block;
}

.nomobile {
   display: none;
}

.onlytablet {
   display: none;
}

.onlymobile {
   display: block;
}


to:

Code: Select all

.box.notablet {
   display: block!important;
}

.box.nomobile {
   display: none!important;
}

.box.onlytablet {
   display: none!important;
}

.box.onlymobile {
   display: block!important;
}


Hi,

I have made these changes but still no change...Do the module suffixes need to change ?

Dave

Whats is even weirder is that the GK Imageshow module that is using the " .notablet " suffix DOES show up if I shrink my desktop browser window to tablet size but does NOT show on a ipad 2 at all...The GK Imageshow module that is using the "onlytablet" does not show anywhere...

Dave

Sorry but it must works - I've made these changes and I've tested it. The only problem can be related with fact that the tablet.css is loaded for smaller widths than mobile.css what cause that it never work.

Sorry but it must works - I've made these changes and I've tested it. The only problem can be related with fact that the tablet.css is loaded for smaller widths than mobile.css what cause that it never work.

If you go to my dev site (link in this thread) you will see it does not work..

Dave

Sorry but the url: http://www1.aerosolpalnet.com/site5 and even http://www.aerosolpalnet.com/site5 don't work.

Sorry but the url: http://www1.aerosolpalnet.com/site5 and even http://www.aerosolpalnet.com/site5 don't work.

the url appears to be http://www1.aerosolplanet.com/site5/