Skip to main content

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

Comments

Popular posts from this blog

Top Google Adsense Alternatives

Google Adsense is a web tool that allows publishers in the Google Network of content sites to automatically serve text, image, video, and rich media adverts that are targeted to site content and audience. These adverts are administered, sorted, and maintained by Google, and they can generate revenue on either a per-click or per-impression basis.  Google servers advertisers using google adwords platform, while adsense is the publishers platform. Google Adsense is the top Ad Publishers platform over the web ranking number one in web advertising industry. Adsense offers contextual advertisements that covers web sites, blogs, games, videos, mobile browsing etc. What made Google Adsense no. 1 is the reliability, stability, variety of services and large number of publishers including google it self. Also google has a fair platform that detects invalid clicks so google successfully protects its advertisers and also offers its best publishers top CPC. Two reasons are behind people think

Error: Write to Disk Access Denied - Troubleshooting - BitTorrent

I have downloaded Bit Torrent software and when trying to download I got an error after few seconds saying: Error: Write to Disk Access Denied Solving this problem is so simple: Shut down BitTorrent program. Go to Start and in the small search box on top of windows start button start typing Bittorrent and the program will show, right click with the mouse on the icon and Run as Administrator. All ur problems are sorted out now and you can enjoy downloading... Good Luck.

IDLE subprocess didn't make connection Python 3.7

After installing Python on Windows 10. When trying to open IDLE, Python's IDE, you might get a  message saying that " IDLE's subprocess didn't make connection . Either IDLE can't start a subprocess or personal firewall software is blocking the connection ". To solve this issue just run IDLE as an Administrator, by right click on the IDLE icon and click Run as administrator. See Photo below: