How To Display Or Hide Website Content On Mobile Devices?
If you would like some website content to only show on mobile devices or not show on mobile devices, then read on. We can do this using CSS. This allows a web developer to easily control what sort of content should appear on mobile devices and what to display on desktops. It is also useful for Google Adsense publishers as Google by default allows only three ads on a particular page and if you want to control the positioning of Google Ads separately for desktops and mobile devices, then this method can be used to manage the display as per the device.
Check out this short video tutorial how to display or hide website content on mobile devices:
Suppose, have a block of code to that displays text or image on a website, then enclose that code in a DIV with a class.
<div class="mobileContent">
<h2>YOU ARE VIEWING ON MOBILE</h2>
</div>
Suppose we want the above content to only on mobile devices, then add the following code on the HEAD of the HTML page.
<style type="text/css">
.mobileContent{ display: none;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileContent{ display: inline;}}
</style>
What the above CSS code does is disable display by default, but display the content only if it is viewed on mobile device. This is achieved using the @media CSS rule specified by resolutions. Since, the above CSS code is only added to the HTML page, it applies only to that particular page. If you want to do the same for the entire site, then the CSS code should be added to the main CSS file of the site as below.
In the main.css (or whatever is the main CSS file of your site), add the following line:
.mobileContent{ display: none;}
The above line disables the "mobileContent" DIV block by default. So it is not loaded.
In the HTML page, add the following code within the HEAD section:
<style type="text/css">
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileContent{ display: inline;}}
</style>
The above code enables the "mobileContent" on mobile devices. But the code is applied only on the HTML page, so it applies only on that particular page. So, to apply on every page, you need to apply the code on all the HTML pages. A better way is to have a common master HTML template or if it is a php site, you can add it to the "header.php" file under <HEAD> section.
How to toggle website content depending on whether it is displayed on mobile or desktop?
Suppose you have to display one content on mobile devices only and another content on website only. But both cannot be displayed at the same time.<div class="mobileContent">
<h2>YOU ARE VIEWING ON MOBILE</h2>
</div>
<div class="desktopContent">
<h2>YOU ARE VIEWING ON DESKTOP</h2>
</div>
In the example HTML codes above, 'mobileContent" block is to be displayed only on mobile devices and "desktopContent" is to be displayed only on desktops but never both. To achieve that, do the following.
In the main CSS file, add the following code.
.mobileContent{ display: none;}As you can see, in the main.css we added only the "mobileContent" code and disabled display. So, the "desktopContent" is enabled by default.
In the HEAD section of the HTML page or header.php (if a php site with a separate header file), add the following code in the HEAD section.
<style type="text/css">
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .desktopContent{ display: none;}}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileContent{ display: inline;}}
</style>
What the above CSS code does is disable the "desktopContent' on mobile device and enable "mobileContent' on mobile. When viewing the site on desktops, the "desktopContent" is displayed by default as is enabled in the main.css file.
Now test your site on desktop and by accessing on mobile device.
No comments