Looking for Something? Search Afriwap now!!!
Add to Flipboard Magazine. | |

HOW TO MAKE YOUR WAPKA SITE RESPONSIVE (with Mobile/Pc view)

Author Topic: HOW TO MAKE YOUR WAPKA SITE RESPONSIVE (with Mobile/Pc view)  (Read 3849 times)

0 Members and 2 Guests are viewing this topic.

Offline Timi Dapsin

  • Administrator
  • Hero Member
  • *****
  • Posts: 2,504
  • Today is that tomorrow you worried about yesterday
    • View Profile
HOW TO MAKE YOUR WAPKA SITE RESPONSIVE (with Mobile/Pc view)
« on: September 29, 2014, 11:37:17 PM »


Creating a Pc view for your Wapka site might sound difficult. :(
So i created this tutorial to help you guys out  ;)

Lets get started
Difficulty: EASY :)

Follow the steps below

All you have to do is make your wapka site responsive so that it can fit into any type of browser
So your mobile / Pc users gets a nice mobile / Pc view of your site.

STEP 1
goto Global settings ==> Head tags (meta,style,....)

STEP 2
In your Head Tag put the below code
Code: [Select]
<style type="text/css"><br />@media only screen and (min-width:1024px){<br />#mobile,.mobile{display:none}<br />}<br />@media only screen and (max-width:1023px){<br />#pc,.pc{display:none} #mobile,.mobile{display:block}<br />}<br />@media handheld{<br />#pc,.pc{display:none} #mobile,.mobile{display:block}<br />}<br /></style>
STEP 3
After adding the css to your Head tag, you can now display contents for either mobile or pc users
by using div (class) to tell the browser if the content is meant for either pc or mobile users
use the code below
To show a certain content to only PC users use the below code
Code: [Select]
<div class="pc">YOUR PC CONTENTS</div>
Code: [Select]
<div id="pc">YOUR PC CONTENTS</div>
And to Mobile users use the below code
Code: [Select]
<div id="mobile">YOUR MOBILE CONTENTS</div>
Thats all.
If you have any Questions or Contributions please comment below. :)



« Last Edit: September 29, 2014, 11:39:19 PM by Timi Dapsin »



 


Other Topics To Read

Powered by EzPortal