Title: Hide Plugin on Mobile
Last modified: August 21, 2016

---

# Hide Plugin on Mobile

 *  [nelsonq](https://wordpress.org/support/users/nelsonq/)
 * (@nelsonq)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/)
 * Hi there.
 * I really like this plugin! But there’s a problem whenever I view with my mobile
   phone.
 * When using a mobile phone, the sideoffer plugin blocks the entire screen of my
   website.
    Is there a way to hide or disable the plugin whenever it detects the
   user access via a mobile.
 * Really need help on this.
 * Thank you.
 * Nelson
 * [https://wordpress.org/plugins/sideoffer/](https://wordpress.org/plugins/sideoffer/)

Viewing 15 replies - 1 through 15 (of 15 total)

 *  [nebojsab](https://wordpress.org/support/users/nebojsab/)
 * (@nebojsab)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721108)
 * Hi Nelson,
 * if you still in doubt how to solve this, take this and place it in your theme
   stylesheet:
 *     ```
       @media screen and (max-width: 480px) {
           #sideoffer {
               display: none !important;
           }
       }
       ```
   
 * Normally you place max-width that suits your needs.
 *  Thread Starter [nelsonq](https://wordpress.org/support/users/nelsonq/)
 * (@nelsonq)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721133)
 * Hi nebojsab,
 * when I try to view from my mobile, it is still covering my entire page.
    Is it
   possible to remove it entirely when view as mobile?
 * To see what I mean, go to both [http://avernordesign.com/designs/halcyon/](http://avernordesign.com/designs/halcyon/)
   and [http://avernordesign.com/designs/quirky/](http://avernordesign.com/designs/quirky/)
   using a mobile phone.
 *  [GraphicToronto](https://wordpress.org/support/users/graphictoronto/)
 * (@graphictoronto)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721137)
 * hey nelsonq,
 * you need to place the css into the sideoffer.php file thats located in /wp-content/
   plugins/sideoffer on your wordpress installation. you’ll then scroll down to 
   where it says CSS styles or something like that and paste the code you have above
   just before the line “</styles>”
 * hope this helps.
 *  Thread Starter [nelsonq](https://wordpress.org/support/users/nelsonq/)
 * (@nelsonq)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721138)
 * Hi, this is what I did. But it doesn’t seem to be working.
 *     ```
       <?php
       /*
       Plugin Name: SideOffer
       Plugin URI: http://www.heavydigital.net/plugins/sideoffer/?utm_source=wpadmin-plugins&utm_medium=plugin&utm_campaign=SideOffer
       Description: <a href="http://www.heavydigital.net/plugins/sideoffer/?utm_source=wpadmin-plugins&utm_medium=plugin&utm_campaign=SideOffer" target="_blank">SideOffer</a> is a pop-out content slider, designed to increase conversions by allowing you to present your users with highly visible calls to action. You could collect emails for your newsletter, offer a free download or make your contact form persistant. Features include an easy and interactive setup, custom graphics (PSD Source included) and the integration of a "sideoffer" class, allowing users to trigger the slider via anchor link.
       Version: 1.0.2
       Author: Heavy Digital
       Author URI: http://www.HeavyDigital.net/?utm_source=wpadmin-plugins&utm_medium=plugin&utm_campaign=SideOffer
       */
   
       // Defaults
       define( 'HD_PUGIN_NAME', 'SideOffer');
       define( 'HD_PLUGIN_DIRECTORY', 'sideoffer');
       define( 'HD_CURRENT_VERSION', '1.0.2' );
   
       // Admin Page
       require_once('sideoffer-options.php');
   
       // create custom plugin settings menu
       add_action( 'admin_menu', 'hd_create_menu' );
   
       //call register settings function
       add_action( 'admin_init', 'hd_register_settings' );
   
       register_activation_hook(__FILE__, 'hd_activate');
       register_deactivation_hook(__FILE__, 'hd_deactivate');
       register_uninstall_hook(__FILE__, 'hd_uninstall');
   
       // activating the default values
       function hd_activate() {
       	// Set Default Values
       	add_option('hd_sideoffer_mode','setup');
       	add_option('hd_sideoffer_title','<h2>Sign Up Today!</h2>');
       	add_option('hd_sideoffer_content',"Create your SideOffer content and place it here.\n\nYou can use text, HTML and [shortcodes]\n\nThis plugin is a great companion to Contact Form 7!");
       	add_option('hd_sideoffer_bg',plugins_url( 'images/sideoffer-bg.png',  __FILE__ ));
       	add_option('hd_sideoffer_color_text','#ffffff');
       	add_option('hd_sideoffer_side','right');
       	add_option('hd_sideoffer_top','120');
       	add_option('hd_sideoffer_in','-510');
       	add_option('hd_sideoffer_out','-50');
       	add_option('hd_sideoffer_width','600');
       	add_option('hd_sideoffer_height','600');
       }
   
       // deactivating
       function hd_deactivate() {
   
       }
   
       // uninstalling
       function hd_uninstall() {
       	# delete all data stored
       	delete_option('hd_sideoffer_mode');
       	delete_option('hd_sideoffer_title');
       	delete_option('hd_sideoffer_content');
       	delete_option('hd_sideoffer_bg');
       	delete_option('hd_sideoffer_color_text');
       	delete_option('hd_sideoffer_side');
       	delete_option('hd_sideoffer_top');
       	delete_option('hd_sideoffer_in');
       	delete_option('hd_sideoffer_out');
       	delete_option('hd_sideoffer_width');
       	delete_option('hd_sideoffer_height');
       }
   
       function hd_create_menu() {
   
       	// create new top-level menu
       	add_menu_page(
       	HD_PUGIN_NAME,
       	HD_PUGIN_NAME,
       	'manage_options',
       	'sideoffer',
       	'sideoffer_options',
       	plugins_url('/images/icon-hd.png', __FILE__));
   
       	add_submenu_page(
       	'sideoffer',
       	HD_PUGIN_NAME,
       	HD_PUGIN_NAME,
       	'manage_options',
       	'sideoffer',
       	'sideoffer_options'
       	);
   
       }
   
       // Add settings link on plugin page
       add_filter("plugin_action_links_".plugin_basename(__FILE__), 'hd_sideoffer_settings_link' );
       function hd_sideoffer_settings_link($links) {
         $settings_link = '<a href="admin.php?page=sideoffer">Settings</a>';
         array_unshift($links, $settings_link);
         return $links;
       }
   
       // Register settings
       function hd_register_settings() {
       	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_mode' );
       	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_title' );
       	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_content' );
       	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_bg');
       	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_color_text');
       	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_side' );
       	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_top' );
       	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_in' );
       	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_out' );
       	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_width');
       	register_setting( 'hd-sideoffer-settings', 'hd_sideoffer_height');
       }
   
       /* Enqueue Admin Scripts */
       add_action('admin_print_scripts', 'hd_sideoffer_admin_scripts');
       function hd_sideoffer_admin_scripts() {
       	wp_enqueue_script('jquery');
         	wp_enqueue_script( 'farbtastic' );
       	wp_enqueue_script('media-upload');
       	wp_enqueue_script('thickbox');
       }
   
       add_action('admin_print_styles', 'hd_sideoffer_admin_styles');
       function hd_sideoffer_admin_styles() {
       	wp_enqueue_style( 'farbtastic' );
       	wp_enqueue_style('thickbox');
       }
   
       add_action('admin_head-toplevel_page_sideoffer','hd_sideoffer_css');
       /* End Enqueue Admin Scripts */
   
       /*** SideOffer Offer Code ***/
       if (get_option('hd_sideoffer_mode')!="setup") add_action('wp_footer','hd_sideoffer',100);
       add_action('admin_head-toplevel_page_sideoffer','hd_sideoffer');
       function hd_sideoffer() {
       	?>
           <!-- SideOffer -->
       	<script type="text/javascript">
       	jQuery(document).ready(function($) {
       		/* SideOffer Sidebar Functionality */
       		$("#sideoffer").toggle(
       			function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_out'); ?>px" }, "slow"); },
       			function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_in'); ?>px" }, "slow"); }
       		);
   
       		/* SideOffer .hd-sideoffer click function */
       		$(".sideoffer").click(function(){ $("#sideoffer").click(); });
       		/* SideOffer aLlow clicks on content box */
       		$("#sideoffer .box").click(function(event){ event.stopPropagation(); });
       	});
       	</script>
       	<div id="sideoffer">
       	<div class="box">
       	<?php echo get_option('hd_sideoffer_title'); ?>
           <?php echo do_shortcode(get_option('hd_sideoffer_content')); ?>
       	</div><!-- End .box  -->
       	</div><!-- End #sideoffer -->
           <!-- End SideOffer -->
           <?php
       }
   
       /*** SideOffer JS  ***
       Enqueue JavaScript )jQuery)
       Since 1.0.2
       ***/
       add_action('wp_head','hd_sideoffer_js',100);
       function hd_sideoffer_js() {
       	wp_enqueue_script('jquery');
       }
   
       /*** SideOffer CSS ***/
       // Enqueue CSS
       add_action('wp_head','hd_sideoffer_css',100);
       function hd_sideoffer_css() {
       	?>
           <!-- SideOffer [HD] CSS -->
       	<style type="text/css">
       	#sideoffer {
       		background: url('<?php echo get_option('hd_sideoffer_bg'); ?>') top left no-repeat;
       		width:<?php echo get_option('hd_sideoffer_width'); ?>px;
       		height:<?php echo get_option('hd_sideoffer_height'); ?>px;
       		position:fixed;
       		top:<?php echo get_option('hd_sideoffer_top'); ?>px;
       		<?php echo "right"; //get_option('hd_sideoffer_side'); ?>: <?php echo get_option('hd_sideoffer_in'); ?>px;
       		text-transform: none;
       		z-index:99999;
       	}
       	#sideoffer .box { position: absolute; right:0; width: 78%; padding: 15px 10px; color: <?php echo get_option('hd_sideoffer_color_text'); ?>; }
       	#sideoffer p { margin-bottom: 5px !important; }
   
        <!-- This is what I add -->
       	@media screen and (max-width: 280px) {
           #sideoffer {
               display: none !important;
           }
       }
   
       	</style>
           <!-- End SideOffer [HD] CSS -->
           <?php
       }
       ```
   
 *  [GraphicToronto](https://wordpress.org/support/users/graphictoronto/)
 * (@graphictoronto)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721139)
 * try changing the max-width to 500px, 280 is pretty small even for a mobile device.
   PS. you don’t have to use a mobile device to test this out, you can just re-size
   your browser window to smaller than 500px width.
 *  [GraphicToronto](https://wordpress.org/support/users/graphictoronto/)
 * (@graphictoronto)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721140)
 * i also took a look at your halcyon design, very nice e-commerce design there 
   bud. one problem i noticed was the iframe in the location widget at the bottom,
   on resizing it overlaps the widget next to it. you should add a margin to that
   frame to prevent this. so something like this
 * .the-widget iframe {
    margin: 0 20px; }
 * or
 * .the-widget iframe {
    padding: 0 20px; }
 * just a suggestion, keep up the good work!
 *  [nebojsab](https://wordpress.org/support/users/nebojsab/)
 * (@nebojsab)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721141)
 * Have you tried with style i posted?
 *     ```
       @media screen and (max-width: 480px) {
           #sideoffer {
               display: none !important;
           }
       }
       ```
   
 * I’m looking at your site, and i can’t see this setting anywhere? This peace of
   code placed in your theme style sheet will completely remove sideoffer from browser
   view.
 *  Thread Starter [nelsonq](https://wordpress.org/support/users/nelsonq/)
 * (@nelsonq)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721153)
 * I got it working now! Thank you so much! [@nebojsab](https://wordpress.org/support/users/nebojsab/)
   [@graphictoronto](https://wordpress.org/support/users/graphictoronto/) 🙂
 *  [fouldsy99](https://wordpress.org/support/users/fouldsy99/)
 * (@fouldsy99)
 * [12 years ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721177)
 * I am having the same problem with removing sideoffer from mobile viewing.
 * I have placed the code below into my theme’s style.css but still hasn’t been 
   removed.
 *     ```
       @media screen and (max-width: 480px) {
           #sideoffer {
               display: none !important;
           }
       }
       ```
   
 * My website is: [World in Sport](http://www.worldinsport.com)
 *  [GraphicToronto](https://wordpress.org/support/users/graphictoronto/)
 * (@graphictoronto)
 * [12 years ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721178)
 * you need to place the css into the sideoffer.php file thats located in /wp-content/
   plugins/sideoffer on your wordpress installation. you’ll then scroll down to 
   where it says SideOffer CSS paste the code you have above just before the line“
   </styles>”, see below…
 * /*** SideOffer CSS ***/
    // Enqueue CSS add_action(‘wp_head’,’hd_sideoffer_css’,
   100); function hd_sideoffer_css() { ?> <!– SideOffer [HD] CSS –> <style type=”
   text/css”> #sideoffer { background: url(‘<?php echo get_option(‘hd_sideoffer_bg’);?
   >’) top left no-repeat; width:<?php echo get_option(‘hd_sideoffer_width’); ?>
   px; height:<?php echo get_option(‘hd_sideoffer_height’); ?>px; position:fixed;
   top:<?php echo get_option(‘hd_sideoffer_top’); ?>px; <?php echo “right”; //get_option(‘
   hd_sideoffer_side’); ?>: <?php echo get_option(‘hd_sideoffer_in’); ?>px; text-
   transform: none; z-index:99999; } #sideoffer .box { position: absolute; right:
   0; width: 78%; padding: 15px 10px; color: <?php echo get_option(‘hd_sideoffer_color_text’);?
   >; } #sideoffer p { margin-bottom: 5px !important; }
 * <!– THIS IS WHAT YOU NEED TO ADD –>
    [@media](https://wordpress.org/support/users/media/)
   screen and (max-width: 480px) { #sideoffer {display: none;} }
 *  [nebojsab](https://wordpress.org/support/users/nebojsab/)
 * (@nebojsab)
 * [12 years ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721179)
 * [@fouldsy99](https://wordpress.org/support/users/fouldsy99/)
 * as I see, it’s all working as it should. If I resize browser to less than 480px,
   sideoffer DIV is disabled. Maybe you need to set that max-width a bit wider.
 *  [fouldsy99](https://wordpress.org/support/users/fouldsy99/)
 * (@fouldsy99)
 * [12 years ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721180)
 * Many thanks, worked a treat!
 *  [GraphicToronto](https://wordpress.org/support/users/graphictoronto/)
 * (@graphictoronto)
 * [12 years ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721181)
 * no worries! i generally set my mobile theme to respond at 480px, if you set it
   any larger you’ll risk not showing the side offer tab on other devices such as
   smaller tablets. anyways, glad it worked for you!
 *  [GraphicToronto](https://wordpress.org/support/users/graphictoronto/)
 * (@graphictoronto)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721190)
 * we love this plugin at [graphictoronto.com](http://graphictoronto.com) but we
   do think it needs some support for mobile browsers!
 *  [Nixonsupercool](https://wordpress.org/support/users/nixonsupercool/)
 * (@nixonsupercool)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721202)
 * Hi nelsonq, I liked the design of your side offer. Please can you give me the
   code of that so that I can re use it instead of going for a new design.
 * Thanks in advance,
    Nixon

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Hide Plugin on Mobile’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/sideoffer_555242.svg)
 * [SideOffer](https://wordpress.org/plugins/sideoffer/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/sideoffer/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/sideoffer/)
 * [Active Topics](https://wordpress.org/support/plugin/sideoffer/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/sideoffer/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/sideoffer/reviews/)

## Tags

 * [mobile](https://wordpress.org/support/topic-tag/mobile/)

 * 15 replies
 * 5 participants
 * Last reply from: [Nixonsupercool](https://wordpress.org/support/users/nixonsupercool/)
 * Last activity: [11 years, 8 months ago](https://wordpress.org/support/topic/hide-plugin-on-mobile/#post-4721202)
 * Status: not resolved