How to apply custom CSS to particular pages on mobile view ?

Hello,

I am trying to apply this code

Code: Select all

@media only screen and (max-width:580px){
#gkTop {
    position: absolute;
   top: 0px !important;
}
}
@media only screen and (max-width:680px){
#gkTop {
    position: absolute;
   top: 0px !important;
}
}

to all pages for mobile view except of the homepage, how can I achieve this ?
I have read this documentation https://www.gavick.com/documentation/joomla-templates/customizing-joomla-template/how-to-use-custom-code-javascriptcssphp-on-selected-pages/ But i didn't really help.
Here is the link to the website http://projects.lexart.me/mocha/
Hope for the help,
Thanks

I think the best way is to use suffix for homepage (How to Disable Content on selected Joomla Pages ?) add this code for all pages and then reset on homepage by suffix like

Code: Select all

.homepageSuffix .selector { here overwrite rules fro homepage }

I think the best way is to use suffix for homepage (How to Disable Content on selected Joomla Pages ?) add this code for all pages and then reset on homepage by suffix like

Code: Select all

.homepageSuffix .selector { here overwrite rules fro homepage }

Thanks for your prompt reply, but can you be more specific ? How can I apply this for mobile views ?

HI

I was asked by @aliko1979 to join discussion.

bkrztuk is right. The best way to make it is with an additional page class suffix. You can add a page class suffix knowing an ID of a page in template settings (see the screen).

But problem is that You will add it to frontpage only, so an approach will be a little bit different. You will need to make the changes and than use the code with suffix attached to frontpage to revert the changes.

Better option would be to hack php code little bit so a page class suffix will be added only if a non-frontpage is discovered, but this will cancel a posibility of template updates so I'm not gonna tell anything more about this idea to not suggest anything to users

HI

I was asked by @aliko1979 to join discussion.

bkrztuk is right. The best way to make it is with an additional page class suffix. You can add a page class suffix knowing an ID of a page in template settings (see the screen).

But problem is that You will add it to frontpage only, so an approach will be a little bit different. You will need to make the changes and than use the code with suffix attached to frontpage to revert the changes.

Better option would be to hack php code little bit so a page class suffix will be added only if a non-frontpage is discovered, but this will cancel a posibility of template updates so I'm not gonna tell anything more about this idea to not suggest anything to users

Hello teitbite, thanks a lot for the explanation, but your suggestion on other post does not work as well. Any thoughts ?

Thanks to everybody helping me to solve an issue, i could manage to achieve what i wanted by myself!

Hi

Glad to hear You've made it