Hide Floating Social on Mobile device

I am using WP touch for the mobile version of the site, with Floating Social enabled, it obscures 1/3 of the mobile theme. How can I hide it on mobile devices? Using css?

  • draivika
    • Design Lord, Child of Thor

    i tried the media queries but I still can't get it to work. I am testing on iphone and android. Something is overriding the @media style. It looks like the plugin writes an in-line style to add the display options from the admin screen. Could that be overriding? Any help is appreciated.

    I can successfully remove the social bar entirely with an !important added to the style, but that removes it from all display sizes.

    here is the site http://artbeatonline.com/

    I tried it with
    @media only screen and (min-width: 480px) {
    #wdsb-share-box { display:none ; }
    }

    and also the device specific media query (min-device-width)

  • Vladislav
    • Dead Eye Dev

    Hi,

    Indeed, there are some styles added in-line to the elements itself - the box has to work across a variety of themes so this is the safest way to go. It also needs to be dynamically positioned properly etc, which just has to be done using inline styles. However, there is still a way to achieve what you need.

    We're currently not doing anything special in the plugin itself to detect mobile browsers. However, you can define a minimum width for displaying the social box as "floating". You can do that in plugin settings, in "Minimum width" field. If the window is narrower then the value you set there, the box will be rendered inline, together with the rest of your content.

    The "inline" appearance is achieved by adding a special class to the box element, which is used to apply the inline styling. If you wish to get rid of the box completely for small resolutions user agents, you could combine "Minimum width" rule with something like this is "Additional CSS" box:

    .wdqs-inline { display:none !important; }

    This will effectively prevent showing the box on any screen that is narrower then what you set in "Minimum width" box.

  • paintedtown
    • Flash Drive

    Good day,

    I would like to rid of the box completely for small resolutions. What two codes do I put exactly?

    .wdqs-inline { display:none !important; } <------ is the suppose to be .wdqs or .wbsb

    Can you please clarify exactly what I should put?

    Thanks!

  • Vladislav
    • Dead Eye Dev

    Hello,

    The class "wdqs-inline" is a class that gets added to the main element when the browser window is smaller then what you set in "Minimum width" field in plugin settings. So, you could set up the minimum width you allow in settings, and then add this to your style:

    .wdqs-inline { display:none !important; }

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.