0

I have Google AdSense on my site’s my sidebar but it looks horrible on a mobile phone. The goal is to remove the sidebar if it’s viewed on a mobile device, but keep it everywhere else. So if it’s on a mobile device hide it, but desktop and tablets show it.

If have found this:

if (wp_is_mobile()) {
    // hide sidebar
} else {
    dynamic_sidebar( 'sidebar-1' ); 
}

Which works, but obviously hides it on all mobile devices including tablets. Is there another function perhaps that is just for phone size screens? I have tried to use media queries in the css but to no avail!

Giacomo1968
  • 23,903
  • 10
  • 59
  • 92
Lovelock
  • 6,609
  • 15
  • 71
  • 162
  • 1
    `I have tried to use media queries in the css but to no avail!` Why? What did you try? What happened? – SLaks Dec 29 '13 at 00:04
  • 1
    use css media queries. Without html and css code we can't help you. – Laxmana Dec 29 '13 at 00:09
  • I will repeat the previous comment to stress that it's the best solution. Use media queries. Just use this: [Css Tricks Link](http://css-tricks.com/snippets/css/media-queries-for-standard-devices/) – The Humble Rat Dec 29 '13 at 00:15
  • possible duplicate of [Detect if device is iOS](http://stackoverflow.com/questions/9038625/detect-if-device-is-ios) – Giacomo1968 Dec 29 '13 at 00:24

2 Answers2

0

this done the trick:

function wp_on_phone() {
   if (!empty($_SERVER['HTTP_USER_AGENT'])

       // bail out, if iPad
       && false !== strpos($_SERVER['HTTP_USER_AGENT'], 'iPad')
   ) 
      return false;
   return wp_is_mobile();
}
pinckerman
  • 3,889
  • 6
  • 29
  • 40
Lovelock
  • 6,609
  • 15
  • 71
  • 162
0

Use CSS media queries. here is an example

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

.sidebar-1{display:none;}

}

Dhanuka Nuwan
  • 669
  • 7
  • 14