the suffix "nomobile" are NOT WORKING FOR ME

Before I ask a question in the forum, I always make sure that I have done what I could to fix the problem.
this time, I tried everything but I was note capable of fixing the problem.

Here is the problem:

the suffix "nomobile" "onlymobile" and "notablet" "onlytablet" are NOT WORKING FOR ME.

this is what I have in the css/mobile.css (template gamenews)

/* limitation suffixes */
.box.notablet {
display: block!important;
}
.box.nomobile {
display: none!important;
}
.box.onlytablet {
display: none!important;
}
.box.onlymobile {
display: block!important;
}

============
can anybody help fix this.

Thank you.

Could You post an url to your site?

Could You post an url to your site?

this is the link to my website:
http://184.154.228.19/~bftvonli/

thank you

Now I see where the problem lies
1. You have a "buggy" version of template. It will be fixed with next release, but You could fix it on your own.
Open file:
/templates/gk_gamenews/layouts/default.php
and find:

Code: Select all

$this->layout->generateLayout();


cut this line from the file (copy to clipboard and remove)
and then edit file
/templates/gk_gamenews/layouts/blocks/head.php
and paste it just before line:

Code: Select all

// include JavaScript


so it looks this way:

Code: Select all

$this->generateLayout();
// include JavaScript


Now when order of files is working correctly - go and edit override.css and check those elements that You have added, as they are completly wrong (site should work well without those classes after completing above solution)


If You would like to hide .nomobile element on devices with width less than 719px, then You should use:

Code: Select all

.nomobile {display: block} //this will display it on all devices
@media only screen and (max-width:719px) {
   .nomobile {display: none;} //this will hide element on devices with screen width under 719px
}


Same with showing elements only on mobile:

Code: Select all

.onlymobile {display: none} //this will hide it on all devices
@media only screen and (max-width:719px) {
   .onlymobile {display: block;} //this will show element on devices with screen width under 719px
}


thank you for your quick response. I was sure that something was buggy. Now I will follow this instruction and we will see.