Ovidiu Purdea is a skilled Wordpress SEO expert that provides quality Wordpress SEO services.

Wordpress Guru

Display or Hide a text or link just to mobile devices

By Leave a Comment

Show content on mobile devices.

This is where things get technical. To insert text or images specifically for mobile on your landing page, simple add the following code in the HTML <body>:

<div class="mobileShow">
TEXT OR IMAGE FOR MOBILE HERE
</div>

This div will declare that this copy will respond only when the class is triggered. By adding the code below, the class will only be triggered when the user is on a mobile device. Add the following code in the HTML <head> section of your page:

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

Hide content on mobile devices.

To hide certain text or images that will not display on mobile devices, you will add similar code as before in your HTML <body>:

<div class="mobileHide">
TEXT OR IMAGE NOT FOR MOBILE HERE
</div>

Then, you will want to add the following code to your HTML <head> section:

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

If you want this styling to apply to your entire website, add the following to your CSS stylesheet:

.mobileHide
{ display: none;}

 

 

 

Whatsapp
Contact
Chiama ora