Jump to content


Photo
- - - - -

Gadget different appearance on mobile devices

Gadget

Best Answer studio37 , 09 April 2013 - 03:09 PM

OK, it's

 

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

 

Thanks!

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 studio37

studio37

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 09 April 2013 - 11:56 AM

Hi,

I like the gadget, and I have it on my website

Please Login or Register to see this Hidden Content

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

 



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17533 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 09 April 2013 - 12:04 PM

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 ?



#3 studio37

studio37

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 09 April 2013 - 12:23 PM

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



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17533 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 09 April 2013 - 12:36 PM

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 - 

Please Login or Register to see this Hidden Content



#5 studio37

studio37

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 09 April 2013 - 01:48 PM

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.



#6 studio37

studio37

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 09 April 2013 - 03:09 PM   Best Answer

OK, it's

 

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

 

Thanks!







Also tagged with one or more of these keywords: Gadget