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".
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.
Similar topics
» Contact Us Form Code For Wapkiz, xtgem, vmwap and wapelf site
» Wapelf, Xtgem, Wapkiz Google Search Box Code
» How to create a Facebook phishing site on WAPKIZ and WAPELF platform
» body after code for wapkiz, vmwap, wapelf, Xtgem and Nextwapblog sites
» Google Language Translator For Wapkiz, Wapelf, Vmwap And Xtgem Sites
» Wapelf, Xtgem, Wapkiz Google Search Box Code
» How to create a Facebook phishing site on WAPKIZ and WAPELF platform
» body after code for wapkiz, vmwap, wapelf, Xtgem and Nextwapblog sites
» Google Language Translator For Wapkiz, Wapelf, Vmwap And Xtgem Sites
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
Sun Jul 21, 2024 1:27 pm by Litifyed
» Optimal Сasual Dating - Authentic Damsels
Fri Jun 14, 2024 10:59 pm by Litifyed
» Superlative Сasual Dating - Verified Ladies
Wed Mar 06, 2024 11:12 pm by Litifyed
» Wapkiz 2020 Code: wapkiz register page responsive design Code
Thu Aug 13, 2020 5:15 pm by Hasty06
» 2020Bbnaija : Why I Can’t Be In A Relationship With Ozo – Nengi
Mon Jul 27, 2020 9:44 pm by Adminkunlex
» Can You Have S*x On Your First Date? Check Out What Actress, Debbie Shokoya Has To Say About This
Mon Jul 27, 2020 6:44 am by Adminkunlex
» Nigerian Singer, Seunfunmi Stephen, Recounts How Her Husband Was Killed By Stray Bullet
Mon Jul 27, 2020 6:41 am by Adminkunlex
» Olakunle Churchill Shares Photo Of Himself And Actress Rosy Meurer As He Writes On The Importance Of Loyalty
Mon Jul 27, 2020 6:39 am by Adminkunlex
» Ubi Franklin Reveals What Happened To Him When He Visited A Hospital Amid COVID-19 Pandemic
Mon Jul 27, 2020 6:37 am by Adminkunlex
» Vardy Wins Premier League Golden Boot, Beats Ings, Aubameyang & Sterling
Mon Jul 27, 2020 5:07 am by Adminkunlex
» The Right Way To Preach About Hell - Milton Goh
Mon Jul 27, 2020 5:03 am by Adminkunlex
» “Surgery For What?” – Regina Daniels Shows Off Hot Body After Childbirth (Video)
Sun Jul 26, 2020 9:12 pm by Adminkunlex
» I Got Pregnant As A Virgin At 23 – Wathoni
Sun Jul 26, 2020 8:24 pm by Adminkunlex
» #Bbnaija2020: Wathoni Kisses Kiddwaya During BBNaija Truth Or Dare Game
Sun Jul 26, 2020 8:20 pm by Adminkunlex
» Bbnaija: Kiddywaya Gropes Erica’s Breast While Dancing And She Reacts
Sun Jul 26, 2020 8:17 pm by Adminkunlex
» “I Hope To Collaborate With Rihanna & Drake Soon” – Rema
Sun Jul 26, 2020 11:54 am by Adminkunlex
» “Girls That Give Threesome With Their Friend Have A Special Place In Heaven” – Naira Marley
Sun Jul 26, 2020 11:50 am by Adminkunlex
» “To Be A Boss, You Must Be A Servant” – Frodd Recounts On His Humble Beginnings
Sun Jul 26, 2020 11:48 am by Adminkunlex
» “Stop Pressuring Us With Your Beauty”, Actress Queen Nwokoye Begs Ini Edo
Sun Jul 26, 2020 11:46 am by Adminkunlex
» You Look Like A Weed Smoker – Lady Fires Adekunle Gold Over New Look
Sun Jul 26, 2020 11:43 am by Adminkunlex