Recent
Categories
View Replies (5)

Ashley Header Call Now module on mobile devices

0
Votes
Undo
  1. kpomilla
    kpomilla
  3. Commercial Templates
  4. Tuesday, 26 July 2016
  5.  Subscribe via email
I'm using the Ashley template and I have header-1 and header-2 modules, that look perfect on a desktop. I've hidden the two modules for mobile devices; what I want is to utilize a second header-1 custom html module (a call now button) that only shows on mobile devices. How can I make this happen?

See the attached screen grabs (both full screen and mobile). Preferably, I'd like the call now button to appear at the top on the hornav...

Thanks in advance for your help.
Responses (5)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to an example of your modules?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
kpomilla
kpomilla
Accepted Answer Pending Moderation
0
Votes
Undo
http://thewebstoretest.com/basketcase/index.php

I have set the call now module to published for now...it shows on a computer, but doesn't show on mobile devices. I don't know how to distinguish between headers and make one visible on mobile devices and one not visible. Add to that, I don't want the call now button visible to desktop/laptop users.

Thanks for your help
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

You appear to have the following in your Custom CSS which will hide your header positions depending on the vertical height of the screen. I suspect this is why you cannot see the module on mobile devices due to the smaller screen height...


@media only screen and (max-height: 700px) {

/* Hide default hornav menu */

.header-1 {display:none !important;}

.header-2 {display:none !important;}

.newmodule {display:block;}

.visible-phone {

  display: none !important;

}


To hide a particular element on a mobile device try adding the 'hidden-phone' class name to it.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
kpomilla
kpomilla
Accepted Answer Pending Moderation
0
Votes
Undo
I removed the section of css, then added the class hidden-phone to the header-1 module (text) and then I added the class visible-phone to the call now button but still no luck.
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

I am unable to see the class names in your website source. To add the class to the entire module you can use the 'Module Class Suffix' field (http://www.joomla51.com/tutorials/item/hide-a-joomla-module-on-mobile-devices).

Alternatively the class can be added to individual items like so...


<img class="hidden=phone" style="display: block; margin-left: auto; margin-right: auto;" alt="callnow" src="/basketcase/images/callnow.png">


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!