Need help roping in the mobile views

I have been stretched to the limit trying to get my head around making the template work in the mobile views. I have so many problems but I have been trying hard to solve them myself and not ask for help.

The site is www.neuropool.com

To hide the higlights and search on mobile (incl tablets) and hide the sidebar_right on phones I have used the code:

Code: Select all

@media only screen and (max-device-width: 960px) {
#gkHighlights {display:none;}
#gkSearch {display:none;}
}


@media only screen and (max-device-width: 765px) {
#gkSidebarRight {display:none;}
}

But I have three problems:
1) There is a huge gap above the articles and to the right of the articles on iPhone
2) I also need to know how to make it so a module is dispalyed ONLY on the iPhone, so kind of the oppsite to my code above.

I hate, CSS, I don't think I'll ever understand it.

Hi,
about iphone - there is NEW problem, there is no official screen size/resolution anymore !
- since when there are new devices appeared few weeks ago, did you forget about 6 ?

If you want to use CSS only for iPhone you have to use tricks or additional extension such as : http://extensions.joomla.org/extensions ... play/21806
or Advanced Module Manager

Using GK suffix you can hide modules on mobile devices, but this rule works for all "small" devices: https://www.gavick.com/documentation/un ... et-layout/

Maybe you don't need all modules on all mobile views, remember about main rule... Mobile Users expect something else than desktop users.