Show content on mobile devices.
This is where things get technical. To insert text or images specifically for mobile on your landing page, simply add the following code in the HTML <body>:
<div class="mobileShow">TEXT OR IMAGE FOR MOBILE HERE</div><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.
Mobil kodlarınızı test edin.
Yalnızca mobil görüntüleyiciler için gizleyeceğiniz ve göstereceğiniz metin / resimler dahil olmak üzere testlerinizi ayarladıktan sonra, sayfayı bir mobil cihazda kendiniz test etmeniz önemlidir. Kendim için gelişmiş bir kodlayıcı olmadığımdan, bazen garip şeylerin sayfaya gelmesine neden olan bir parantez unutur veya yanlış yazarım. Her şeyin masaüstünüzde mobil cihazınıza karşı olması gerektiği gibi çalıştığından emin olmak için bu adımı unutmayın.
