How To Display Or Hide Website Content On Mobile Devices? F you would like some website content to only show on mobile devices or not show on mobile devices, then following this post. You can do this using CSS. This allows a developer to easily control what sort of content should appear on mobile devices and what to display on desktops. When using a Spacer Element to separate content on a page, the spacer leaves a blank space on the mobile version as well. Adding the Spacer to the 'Hide if Mobile' Element will hide the Spacer when the page is viewed from a mobile device. Hi mate, at present there is no way to hide the navigation bar. But i have seen on devices with Lumia Denim update such as the Lumia 735, you are able to swipe away this navigation bar. Fingers crossed this comes to your device when the Lumia Denim update is released. Change your default launcher to hide app icons. If you’re unable to hide apps on your Android device, changing your launcher is a good workaround. If the term “launcher” doesn’t sound familiar, an Android launcher is the app that controls your Android device’s layout, the look of your Home screen, and your app drawer.
Mobile screen is small to display too much information. If you have a long WordPress post and do not want to display some part of the post on a mobile device, you can use a simple code to hide them. This code will only hide content on mobile without affecting the display on computers.
Hide WordPress content on mobile Phones
Here is the code you can use:
function not_mobile_shortcode($atts, $content = ') {
if (wp_is_mobile() true) {
$content = ';
}
return $content;
}
add_shortcode('not_mobile', 'not_mobile_shortcode');
You can copy and paste them into the function.php of your WordPress theme. Then when you are composing a new post or editing an existing WP content, use this tag to hide any content you do not want mobile users to view:
Hide If Mobile Hide Content From Mobile Devices. 19
[not_mobile]content invisible on mobile[/not_mobile]
Go to publish the post and view it with a web browser on your mobile device, you will not able to find the part nested in the not mobile section.
If you like to selectively hide content from particular devices, like mobile phones, tablet, desktop computers, iOS, Windows phone, Android, check out this guide to hide WordPress content using a plugin.
This is a definitive guide into hiding content on desktop and web clients that you only want displayed on mobile email clients.
These days, responsive design is getting popular on email. Having the layout and sizes of elements change when viewed on a desktop vs mobile environment make for a much more pleasing email experience for the recipient.
The question is, what is the best way to hide content that you only want seen on a mobile device – such as a call to action to try out your mobile app or a clever layout trick – so that it is not displayed when the user opens on an email on a desktop or web client?
Try out the Image Carousel for Email Tool.
Hide Div On Mobile Devices
The proper way to hide content is to style a content with “display:none”, however due to the quirks on email clients such as Yahoo! Mail and Outlook 2007, 2010 and 2013 (Outlook 2007/10/13), its not as straightforward.
The markup below will do the trick:
2 | <div class='mobilecontent'style='mso-hide:all;display:none;max-height:0px;overflow:hidden;'> </div> |
Warning: Make sure to put this on a div and not on a table. You can nest the table within the div if needed. This is because Yahoo! Mail will strip display:none and max-height cannot be applied to tables.
To show the content within mobile clients you add a media query:
This is the “proper” way to hide elements in HTML. However Yahoo! Mail (Gmail also previously (before 2016)) strips out styles marked display:none effectively displaying the content and Outlook 2007/10/13 is a bit temperamental when it comes to that rule (explained below). So although for the majority of the clients display:none will work we still need to do more. Modern mobile email clients however seem to abide by that rule so hiding content within mobile is more straightforward.
2) Gmail and max-height
Yahoo! Mail (Gmail also previously) strips out display:none so the next best option is to set an element’s height to 0 pixels. However strangely enough, Yahoo! Mail converts CSS height rules to min-height – which defeats our intended purpose. However there’s another CSS rule that we CAN use, and that is max-height. So together with setting the overflow to hidden, “max-height: 0px; overflow: hidden;” will hide content within Gmail.
Unlike display:none however, setting the max-height of an element to 0 will not hide any borders set on the element itself. So if you want to hide an element with borders, you need to wrap that element with a div and set that div’s max-height and overflow instead.
3) Outlook 2007/10/13 and conditional comments (See update)
The CSS rule display:none works with Outlook 2007/10/13 unless there is a table within the element you want to hide. In that case the table’s contents will be visible even though everything else is hidden.
As every seasoned email designer knows, Microsoft Outlook took a turn for the weird with the introduction of Outlook 2007. Its workings have been a mystery since. Microsoft knows about it and for some strange reason decided not to do anything about it – the first person who is able to get an adequate explanation from Microsoft gets a shout out on this blog!
Nevertheless, Outlook has provided us with a simple solution: conditional comments. Conditional comments is a Microsoft proprietary markup that instructs their clients on how to render content within the comment blocks.
The markup below will allow you to hide any content within Microsoft Outlook 2007/10/13. Other clients will simply ignore the comments.