Latest topics
The most tagged keywords
Forum
Current date/time is Sun May 19, 2024 3:23 pm
Search found 1 match for mobile
How To Create Mobile And Pc View In Wapkiz, Xtgem And Wapelf Site
This Tutorial will teach you how to create aWapkiz 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.
- on Sat Dec 28, 2019 7:34 pm
- Search in: Webmaster
- Topic: How To Create Mobile And Pc View In Wapkiz, Xtgem And Wapelf Site
- Replies: 0
- Views: 134
|
|
Wed Mar 23, 2022 4:36 pm by Kunlex
» 50 Best Web Fonts To Use In 2022 wapkiz, wapka and waphosts
Wed Mar 23, 2022 4:34 pm by Kunlex
» Wapkiz, wapka and waphosts body background image code
Wed Mar 23, 2022 4:33 pm by Kunlex
» Wapkiz user var about or rank to show in blog
Wed Mar 23, 2022 4:31 pm by Kunlex
» Pro Evolution Soccer 2016 (PES 2016)
Wed Mar 23, 2022 4:23 pm by Kunlex
» Working redirection code for wapka, wapkiz, waphosts and others
Wed Mar 23, 2022 4:18 pm by Kunlex
» How to Replace the Xiaomi Mi Max Screen
Fri Jan 03, 2020 7:40 pm by Kunlex
» How to know if someone is online on Instagram?
Fri Jan 03, 2020 7:28 pm by Kunlex
» How to hide Instagram posts from certain followers?
Fri Jan 03, 2020 7:28 pm by Kunlex
» How to Replace the Redmi Note 3/Redmi Note 3 Pro Screen
Thu Jan 02, 2020 1:11 pm by Kunlex
» Fresh Tutorial of iPhone 7 Plus Cracked Screen Refurbishing
Thu Jan 02, 2020 1:10 pm by Kunlex
» iPhone Data Recovery from Dead Logic Board / Phone
Thu Jan 02, 2020 1:09 pm by Kunlex
» Reason why phone hangs up itself?
Thu Jan 02, 2020 1:07 pm by Kunlex
» How To stop people from tagging you without your approval On Instagram
Thu Jan 02, 2020 5:27 am by Kunlex
» How to you unmute someone on Instagram in 2020?
Thu Jan 02, 2020 5:24 am by Kunlex
» Difference between WordPress.com and WordPress.org
Thu Jan 02, 2020 5:21 am by Kunlex
» Aircraft: Why cabin lights are dimmed during takeoff and landing?
Wed Jan 01, 2020 8:56 pm by Kunlex
» Aircraft: Why window shades are raised up during takeoff and landing?
Wed Jan 01, 2020 8:54 pm by Kunlex
» Genuine Reasons Why Most Ladies End Up Single In Life
Wed Jan 01, 2020 9:58 am by Kunlex
» Reasons Why Some Girls Are Still Single
Wed Jan 01, 2020 9:55 am by Kunlex
» What Is <! Doctype> And Why is it necessary to use in HTML5?
Wed Jan 01, 2020 7:54 am by Kunlex
» What is XML?
Wed Jan 01, 2020 7:50 am by Kunlex
» What does parsing XML means?
Wed Jan 01, 2020 7:48 am by Kunlex
» Mr Real – Onigbese
Tue Dec 31, 2019 9:29 pm by Kunlex
» Top 20 Talented Upcoming Artistes To Watch-out For In 2020
Tue Dec 31, 2019 6:55 am by Kunlex
» How To Redirect Xtgem, Wapkiz, Wapelf From Subdomain To Domain
Tue Dec 31, 2019 5:32 am by Kunlex
» How to embed CSS in HTML?
Tue Dec 31, 2019 5:29 am by Kunlex
» How to link a CSS stylesheet to an HTML document using Notepad?
Tue Dec 31, 2019 5:21 am by Kunlex
» What is HTML CSS and JavaScript?
Mon Dec 30, 2019 10:22 pm by Kunlex
» Differences between HTML, CSS and JavaScript
Mon Dec 30, 2019 10:20 pm by Kunlex