How to make this html code and css be in mobile app?


Tags: html,css3

Problem :

This is my html and css that I started, sorry for bad edit. I really want to know how to make a mobile app. **What is the code that I should add to have a mobile size app when open in web that I don't need to resize it? Then what can I do to make it responsive in css? Thanks **

@charset "utf-8";
body {
	width: 960px;
}
.wrapper{
	text-align: center;
	width: 99%;
	position: absolute;
}
.header{
	background-color: #ffffff;
}

.header img {
	width: 360px;
}

#nav {
	background-color: black;
	width: 100%;
	font-size: 1em;
	border-top-width: medium;
	border-top-style: groove;
	border-bottom-style: groove;
	border-bottom-width: medium;
}
#nav ul {
	list-style: none;
	display: block;
	font-size: larger;
}
#nav ul li {
  display: inline-block;
}
#nav ul {
  text-align: center;
}
#nav ul li a {
	color: #ffffff;
	text-decoration: none;
	display: block;
	padding-top: 10px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 10px;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
	text-transform: uppercase;
	position: relative;
}
#nav ul li a:hover {
	color: #1E5BD4;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#nav ul li a.active {
	text-decoration:underline;
	color: #EDF0BA;  
}
.how, .about{
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	margin-left: 10%;
	margin-right: 10%;
	background-color: white;
	text-align: left;
	color: black;
}
.sectiontitle{
	text-align: center;
	color: black;
	text-shadow: 1px 1px 2px #767676;
}
.footer{
	background-color: black;
	width: 100%;
	border-style: groove hidden hidden;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	padding-top: 1%;
	padding-bottom: 1%;
	font-size: 1em;
	color: #FFFFFF;
	font-variant: small-caps;
	vertical-align: middle;
}

.addnotes {
	float: left;
	padding-left: 2%;
	font-color: black;
}

.listnotes {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.listnotes li {
	background: url('noteicon.png') no-repeat;
	width: 220px;
	height: 135px;
	margin-left: 45%;
	padding-top: 5%;
	margin-bottom: 10px;
}

.noteTitle {	
	float: left;
	padding-left: 2%;
	color: black;
}

.createcontent {
	float: right;
	padding-right: 25%;
	width: 50%;
	margin: 0 auto;
}

.definition {
	padding-top: 10%;
}

.enumeration {
	padding-top: 15%;
}

#titletextbox {
    background: transparent;
    border: none;
	width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="wrapper">
  <div class="header" id="header">
    <div class="logo"> <img src = "logo.png" alt = "logo" name = "logo" id = "logo"> </div>
  </div>
  <div class="navigation" id="nav">
    <ul>
      <li><a href="index.html" class='active'><span>Home</span></a></li>
      <li><a href="notes.html"><span>Notes</span></a></li>
      <li><a href="exam.html"><span>Exams</span></a></li>
    </ul>
  </div>
  <span class="divider"></span>
  <div class="homecontent">
    <h2 class="sectiontitle">About Test Your Notes!:</h2>
    <section class="about">
    TestYourNotes is a web application that will surely help students 
	boost their scores for their quizzes and exams. 
	TestYourNotes lets users take down notes with two different categories, 
	namely, Definition of Terms and Enumeration. 
	After saving their notes, they can easily review their notes through 
	the view function and also make a mock test/questionnaire as a reviewer 
	using the notes they have created to test their understanding 
	about what they&#146ve taken down through the Generate exam function.
    </section>
    <h2 class="sectiontitle">How To Use:</h2>
    <section class="how">
    <h3>To write notes</h3>
	<ul>
		<li> Navigate to the NOTES page </li>
		<li> Click add + a note </li>
		<li> Edit title of the note on the left side of the page </li>
		<li> Add an item depending on the category you want to add (Definition of terms and/or Enumeration)</li>
		<li> If you choose to add an item for Definition of terms category, click add 
			 new item to define a term. Simply type the term you want to define and its definition.
			 After adding all the terms you want, click save. </li>
		<li> If you choose to add an item for Enumeration, click add new Enumeration of items
			 Simply type the classification of the items you will enumerate and type all the items
			 of that classification. To add a new item for that classification just click enter. 
			 After adding all the classification you want, click save. </li>
	</ul>
	<h3>To view notes</h3>
	<ul>
		<li>Click the view notes below the name and date of the notes you have saved.</li>
	</ul>
	<h3>To generate an exam for a note</h3>
	<ul>
		<li>Click the generate exam below the name and date of the notes you have saved.</li>
		<li>Upon clicking generate exam button, a dialog box will appear asking what
			you want to name your generated exam. Type the name you want and then 
			click generate</li>
	</ul>
	<h3>To answer an exam</h3>
	<ul>
		<li>Click the title of the exam you want to answer.</li>
		<li>After answering all the items simply click submit exam</li>
		<li>After clicking submit exam, your score will be shown immediately.</li>
	</ul>
    </section>
  </div>
  <div class="footer">
  	<h3 class="copyright">Copyright</h3>
  </div>
</div>
</body>
</html>



Solution :

If you want a mobile app you need to create a mobile app using the programing language for whichever OS/device you choose. You can then use webviews to display web content within the app. Take a look at ide's for mobile app development as an easy start.

To create responsive websites that display nicely on mobile devices, use media queries. You can find relevant info all over the shop. Just do a search for css @media queries.

An example of a basic media query is as follows:

@media screen and (max-width:640px){
/* mobile devices with a max screen width of 640px */
p{color:#f00;}
}

    CSS Howto..

    How to get css class name using Selenium?

    How to make table td take the width of its content

    How can I make a wrapper's css not apply to it's contained elements [closed]

    How to make a wrapper for HTML, CSS and Javascript Pages in iOS

    How to make child divs visible in tympanus.net's CSS Radio Checked Tab Method

    How to get an automatic effect of rosace in css ?

    How to define different css based on element changing number

    How do you modify the modal height without removing the slide effect in Bootstrap Twitter?

    How to conditionally add css properties in jquery (coffeescript)

    Javascript: How to highlight some numbers or text within a line or paragraph?

    show button instead of menu bar when browser resize in css/html [closed]

    How can i make an icon blink using CSS/javascript/jquery [duplicate]

    How to make a line in a table with CSS

    How to create a menu that rolls down? CSS

    How to use CSS for formatting Crystal Report in Winform?

    How do i use a simple string variable with jquery?

    How to get css3 multi-column count in Javascript

    How to disable temporary cursor with javascript?

    Horizontal
      navigation - how to vertical align contents of

    css how to force to ul,ol to show numbers or disc, after reset the list style.?

    How to center this on screen

    how to make row span column content start at the top of the column with css and html

    How do I make an image resize inside a div that is resizing to a percentage of a parent div?

    How to include SASS into CSS

    How to add a css style class atribute to links generated from wp_get_archives?

    how to code different type of border in css?

    Spring, Prime Faces application not showing CSS when deploying to Heroku

    HTML + CSS dropdown menu: how to add a button between each first-level link without breaking the alignment?

    how to do css styling

    How to set the width of my table columns to a fixed value?