Archived

This topic is now archived and is closed to further replies.

  • 0

Gadget different appearance on mobile devices


Question

Posted · Report post

Hi,

I like the gadget, and I have it on my website http://www.studio37.de to provide a link to my facebook-page.

I only have one problem with it:

If the gadget icon is shown permanently, it disturbs the appearance of the page viewed on a mobile device. On the other hand, if the icon is only shown on hover, it is not "showy" enough on a normal monitor.

Is there a way to let a mobile device show the icon only on hover, while it is displayed permanently on a normal monitor?

 

I also use the Mobile Menu plugin. is it possible to add something to it's CSS to let the gadged change?

 

Thanks for an answer,

Andreas

 

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

OK, it's

 

body.iphone .pl-gadget {
  display:none;
}

 

Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Andreas,

 

Not sure what you mean when you say "s there a way to let a mobile device show the icon only on hover". How do you hover on a mobile device ?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Ninja,

thanks for the quick reply. Of course I was completely on the wrong path: on a mobile device there is no "hover".

So the question has to be:

Is there a way to show the gadget icon on a normal computer, and suppress it on a mobile phone?

Thanks a lot,

Andreas

Share this post


Link to post
Share on other sites

Posted · Report post

The simplest method to disable Gadget on mobile devices would be to hide it via CSS. You can do this by installing/enabling Browser Specific CSS plugin. Once enabled, you can use one of the unique classes added to your site and use this class in your custom CSS which is targeting Gadget and use display:none;

 

This will hide Gadget on mobile devices viewing your site.

 

For more information on the Browser Specific CSS plugin, see here - http://support.pagelines.me/docs/plugins/browser-specific-css/

Share this post


Link to post
Share on other sites

Posted · Report post

I have enabled Browser Specific CSS plugin.

I have added

 

pl-gadget.iphone {
  display:none;
}

 

to my Custom CSS.

 

Nothing changes, the gadget is still displayed.

Share this post


Link to post
Share on other sites