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;}}

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

Hi! Welcome to the SEO-Alien! Glad to be Found!


Pin It on Pinterest