Problems on mobile devices

Hi,
Website: http://42pulse.com
CSS Override enabled
CSS Compression disabled
Any caching (Joomla or Template Settigns) disabled.

Kindly take a look there and compare it on a pc browser versus a mobile phone browser. You will find two issues.

1. There is a module in 'intro', which is too large for the mobile screen. Hence I would like to show this module only on devices with large screens and another one on small screen devices. I checked the forums and tried several attempts with no-mobile, only-desktop etc. But to no avail. Right now I removed all the changes I did related to this in override.css as well as the suffix to the module. So the environment is clean.

2. When viewing the site on a mobile phone, I do not see the main menu at all.

Please let me know, if you need any further information. I spent quite some time on this already and I suppose it is simple, but for the life of me cannot figure it out. So I turn to the experts

Hi

1. Module class suffixes are not working for intro module position. It's a specific position where this option was disabled on purpose not to ruin design. You will have to use css to hide/show module per screen width. Here an example of code capable of doing that:

Code: Select all

.gkIsWrapperFixed > div:first-child { display: none; }

@media only screen and (max-width:1030px) {
.gkIsWrapperFixed > div { display: none; }
.gkIsWrapperFixed > div:first-child { display: block; }
}



2. You are missing font-awsome included in Your site's header. Please go to template settings and enable this fonts by adding some dummy css selector in Fonts section.

@1: Thank you. I will experiment with that.
@2: I am not following. The 'fonts' tab in the template looks like this:



Where exactly should I do the change?

Hi

2. I was wrong. I can see what happened now. All You need to do is to add this code to override.css

Code: Select all

[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;}
.icon-reorder:before{content:"\f0c9";}


This works nicely. Thank you.