How To Create Mobile And Pc View In Wapkiz, Xtgem And Wapelf Site

by **Kunlex** Sat Dec 28, 2019 7:34 pm

This Tutorial will teach you how to create a
Wapkiz site with Pc view
Understanding WapkizFunctions in designing
Pc View
We are going to be looking at the Most
important functions that will help you in
succesfully Creating a WAPKIZ website with
Pc View.
1. Headtags - the Headtags is one of the most
important function when designing your pc
view (desktop version), this is where you will
put all the important codes that will make
your website 100% responsive.
As a programmer you need to explore each
and every function in a program. The
headtags is very important because it comes
before the
<body></body> tags and any code
e.g Css or Javascript or Jquery code you put
there will affect the behaviour of your
webpage so take note, the headtags plays
the most important role in developing both
PC and MOBILE version for your website
making your website dynamic and user
friendly.
RESPONSIVE CSS TO PLACE IN YOUR
HEADER SECTION
This code will hide your pc contents from
mobile users and your mobile contents from
pc users
Code:
<style type="text/css">
@media only screen and (min-width:1024px){
#mobile,.mobile{display:none}
}
@media only screen and (max-width:1023px){
#pc,.pc{display:none} #mobile,.mobile
{display:block}
}
@media handheld{
#pc,.pc{display:none} #mobile,.mobile
{display:block}
}
</style>
The CSS code above is a Media query
conditional statement. E.g the code above is
telling the mobile/pc user that “if min width
(minimum width of the device screen is 1024)
show pc contents and if max width is 1023 do
not show pc contents... This css media query
actually tells the browser to adjust css class
or ID's to match the media. Css rule for the
width/size of the screen.
CREATING YOUR FIRST PC VIEW IN
WAPKIZ
Now you have to place the above code
inside your header section. Once you Have
placed the Css code inside your header hiding
your contents for pc View or Mobile View will
be extremely easy.
To hide yor contents for pc simply wrap the
item with
<div class="pc">YOUR PC CONTENTS</div>
OR
<div id="pc">YOUR PC CODES/CONTENTS</
div>
The above codes will make you show
contents for only pc users (people using a
computer).
to hide mobile content from Pc users just
replace "pc" with "mobile" e.g
<div id="mobile">YOUR MOBILE
CONTENTS</div>
You can also write a javacript if else
statement here's a javascript statement you
can use:
Code:
<script type="text/javascript"> var
w=window.innerWidth; if(w>=800)
{document.write('<style type="text/css">.wap
{display:none;}</style>');} else
{document.write('<style type="text/css">.web
{display:none;}</style>');}</script>
If you use these Code above you can hide
your mobile contents by using a div class
"wap" to wrap your mobile items and for
your Pc contents you can use "web".

NCP Commuinity. This will make coding
easier for you on your Wapkiz and render
your webpage responsive.
Do you have any questions?? Ask via the
comment area below.