How to Show Content on Mobile Devices, Smart Phones and Tablets only

 There are two ways to do that, whether to use javascript or to use css style sheet.

Javascript: The code below will redirect the visit to a different page which should be a mobile theme page:

<script>
 <!--
  if (screen.width <= 699) {
  document.location = "https://www.mymobilepage.com";
}
//-->
</script>

 CSS: In CSS you can decide which part of your page to show or to hid on a mobile device ora tablet:

Show content on mobile devices and tablets:

The below div tag shows the content on mobile devices and or tablets:

<div class="showToMobile">

TEXT OR IMAGE FOR MOBILE HERE

</div>

The below css code contains the style class definition, this should be stored in your .css file on in your style sheet in the head section of your html page:

<style type="text/css">

  .showToMobile
   { display: none;}

   /* Portrait and Landscape Screens */

   @media only screen

   and (min-device-width : 320px)

   and (max-device-width : 699px)

   { .showToMobile { display: inline;}}

</style>

 

Hide content on mobile devices and tablets:

The below div tag hides the content on mobile devices and or tablets:

<div class="mobileHide">

TEXT OR IMAGE NOT FOR MOBILE HERE

</div>

The below css code contains the style class definition, this should be stored in your .css file on in your style sheet in the head section of your html page:

<style type="text/css">

   .mobileHide { display: inline;}

   /* Portrait and Landscape Screens */

   @media only screen

   and (min-device-width : 320px)

   and (max-device-width : 699px)

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