How to Hide Website Text from Mobile PhonesWith today’s mobile responsive WordPress themes, the look of your website on a mobile phone is more important than ever and certain considerations should be put into your website design for mobile phones.

How does your website look on mobile? Easy to view? Easy to navigate? Perhaps there are some occasions that you may want to hide a video, images or anything else on a mobile phone to make it more user-friendly.

Sometimes you may want to hide certain things on mobile phones only.

Here is how to hide any website content from a mobile phone only.

From your WordPress theme, you can either add this to your themes CSS editor or add this code directly to your stylesheet, (style.css).  You can also add it directly to your HTML in HEAD the section. (One or the other, not both.)

<style type=”text/css”>
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){  .mobileHide { display: none;}}
</style>

Once that is saved to your stylesheet or websites HEAD section, the rest is really simple.

Around the text/image/video that you would like to hide from mobile devises, add the code highlighted in yellow in front and behind the section from your HTML or Text Editor. (In other words, don’t add this from the visual editor)

<div class=”mobileHide”>Text/Image/Video That is NOT for Mobile</div>


There ya have it, happy mobile hiding!

About the Author: SEO Alien (441 Posts)

Need a website? Need quality, engaging content for your niche? The SEO-Alien develops out of this world content that engages people, gets you to the top of the Search Engines, valuable Social Media shares and increased sales for any online business! Learn more from The SEO Alien Galaxy Package!