Hide display of Sitelock badge on mobile devices

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

I added it to the media query as below:

  
 .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 {
		width: 100%;
    text-align: left;
    padding: 40px 0;
	}


div.sitelock {
    visibility: hidden;
} 

}

.... and I added a class to the code in the footer but it still displays. What did I do wrong?

<div class="sitelock" style="position: fixed; z-index: 1000; width: 164px; height: 98px; bottom: 15px; right: 15px;"><a href="#" onclick="window.open('https://www.sitelock.com/verify.php?site=sheboyganseniorcommunity.com','SiteLock','width=600,height=600,left=160,top=170');" ><img class="img-responsive" alt="SiteLock" title="SiteLock" src="//shield.sitelock.com/shield/sheboyganseniorcommunity.com" /></a></div>

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

I emptied cache. Still seeing badge on mobile devices.

I have the css in the plugin called simple custom css.

@media only screen and (max-width: 768px) {
  
 .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 {
		width: 100%;
    text-align: left;
    padding: 40px 0;
	}


div.sitelock {
   display: none
} 

}

Here is footer code.

<div id ="sitelock" style="position: fixed; z-index: 1000; width: 164px; height: 98px; bottom: 15px; right: 15px;"><a href="#" onclick="window.open('https://www.sitelock.com/verify.php?site=sheboyganseniorcommunity.com','SiteLock','width=600,height=600,left=160,top=170');" ><img class="img-responsive" alt="SiteLock" title="SiteLock" src="//shield.sitelock.com/shield/sheboyganseniorcommunity.com" /></a></div>

ASKER

I don't know what you mean by, "injecting the css with StyleBot"

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

I changed how it appears in simple custom css

@media only screen and (max-width: 768px)  {
div#sitelock {
   display: none
} 

}

I am not sure why you are not seeing the code in this plugin. Still not working. : (

I'm still seeing nothing wrong with the CSS you posted here. I just don't see the reference to the CSS file on your website and the Inspector shows no evidence of the style existing.