Latest topics
The most tagged keywords
How To Create Mobile And Pc View In Wapkiz, Xtgem And Wapelf Site
9jabaze - Entertainment | Webmaster | Browsing Tricks | Games/Apps Hub :: Technology Forums :: Blogging
Page 1 of 1
How To Create Mobile And Pc View In Wapkiz, Xtgem And Wapelf Site
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.
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".

easier for you on your Wapkiz and render
your webpage responsive.
Do you have any questions?? Ask via the
comment area below.
9jabaze - Entertainment | Webmaster | Browsing Tricks | Games/Apps Hub :: Technology Forums :: Blogging
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
|
|
» 2020Bbnaija : Why I Can’t Be In A Relationship With Ozo – Nengi
» Can You Have S*x On Your First Date? Check Out What Actress, Debbie Shokoya Has To Say About This
» Nigerian Singer, Seunfunmi Stephen, Recounts How Her Husband Was Killed By Stray Bullet
» Olakunle Churchill Shares Photo Of Himself And Actress Rosy Meurer As He Writes On The Importance Of Loyalty
» Ubi Franklin Reveals What Happened To Him When He Visited A Hospital Amid COVID-19 Pandemic
» Vardy Wins Premier League Golden Boot, Beats Ings, Aubameyang & Sterling
» The Right Way To Preach About Hell - Milton Goh
» “Surgery For What?” – Regina Daniels Shows Off Hot Body After Childbirth (Video)
» I Got Pregnant As A Virgin At 23 – Wathoni
» #Bbnaija2020: Wathoni Kisses Kiddwaya During BBNaija Truth Or Dare Game
» Bbnaija: Kiddywaya Gropes Erica’s Breast While Dancing And She Reacts
» “I Hope To Collaborate With Rihanna & Drake Soon” – Rema
» “Girls That Give Threesome With Their Friend Have A Special Place In Heaven” – Naira Marley
» “To Be A Boss, You Must Be A Servant” – Frodd Recounts On His Humble Beginnings
» “Stop Pressuring Us With Your Beauty”, Actress Queen Nwokoye Begs Ini Edo
» You Look Like A Weed Smoker – Lady Fires Adekunle Gold Over New Look
» Davido Turns Chef, Spotted Cooking Probably For Chioma And His Crew
» Kanye West Apologizes To Kim Kardashian For Public Rants On Their Marriage
» [Lyrics] Korede Bello – Hey Babe