Show & hide specific content on mobile devices

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

Test your mobile codes.

Once you have your tests set up, including the text/images you will hide and unhide for mobile viewers only, it’s important that you test out the page on a mobile device yourself. Because I’m not an advanced coder myself, sometimes I forget a bracket or misspell a word that ends up causing weird things to happen to the page. Don’t forget this step to ensure that everything is working the way it is supposed to on your desktop versus your mobile device.

Knowledge Base