Skip to main content

Posts

Showing posts from January, 2017

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) { .showTo…