Display a Block for mobile only without creating new theme

Question

I'm trying to display a main navigation menu block but ONLY for the site when it's viewed on a mobile. I need to do this without creating a new theme to do so though so it all works on 1 theme only.

Any ideas how this can be done?

Thanks

Answer 1

Take a look at the Browscap Block module. Here is a quote about it (from the module's project page):

... adds visibility options to block configuration settings to allow you hide or show blocks in mobile devices.

If you are looking for the same thing for Panel panes check out Browscap CTools.

Answer 2

You could try CSS and media queries.

• Enable the block through the blocks admin page
• In your theme's default stylesheet, hide the block by default using display: none;

Option 1:

• Use media queries in your theme's main stylesheet to hide/display the block (see bottom of article/article snippet in answer)

OR

Option 2:

• Create another CSS file (ex. mobile.css) in your theme and add rules to show the block
• Use media queries in your theme's .info file to determine to use the mobile stylesheet

To learn more about media queries in Drupal, see Media queries & Drupal.

From the article:

To define a CSS file in your Drupal theme's info file you would usually write declarations such as

stylesheets[all][] = style.css

or

stylesheets[screen][] = style.css

etc.

To use media queries you can write declarations such as

stylesheets[screen and (max-width: 600px)][] = screen-600.css

or

stylesheets[screen and (orientation:landscape)][] = screen-landscape.css

You can also define media queries within your CSS file.

@media screen and (max-device-width: 600px) {

}

Answer 3

You can try the ThemeKey module.

Also check out the Context module.

Answer 4

I found a difficulty of using CSS to exclude blocks due to the very similar css output for each block. I found that the block_class module works very nicely in this case. I just place a css class for that block, and then I can modify my css code in my css files. The block_class module can be found here: https://www.drupal.org/project/block_class

Answer 5

I use this code to hide blocks in mobile view and it works perfectly. past this code in your page.tpl.php file and add ID hidden to the block or in my case adsenese Ad unit.

<script type="text/javascript">

jQuery(document).ready(function($){

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
 $("#hide").css("display", "none");
 }
});
</script>

Answer 6

You don't really need to load the block and hide that with css. Loading a block will be overkill for page. Use the Context Breakpoint module instead (for D7, currently in Beta3).

Answer 7

I've solved this myself. I used a combination of Context module and Mobile Tools module. From here, the context for mobile device is available where i select 'Mobile'. Then i set a reaction for the Blocks and then can select blocks to show just for mobile.