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 theme elgg with HTML and CSS only? [closed]

    How Do I Set the condition for a user to have to fill in a Textfield

    jquery .show() hides immediately

    How to keep banner animations running while changing webpages [closed]

    How to assign CSS background image properties mixing classes and ids

    how to change the color of disabled controls

    jquery how to regex css style positive to negative, negative to positive?

    How to fix this mouse hover transform scale effect (animation provided)

    How to use objects returned by a function?

    css book on css box model, how block element width can get affected etc

    How to center my text vertically in a circular div with css

    How to display two columns of blocks with CSS

    How to create custom shapes with pseudo classes in CSS3

    How to apply a CSS style to div AND the div nested in the div [duplicate]

    How to make hyperlink for a background image?

    How compatible is the new Microsoft edge browser? [closed]

    How to DRY Sass code using variables?

    How to keep a very tight control over the order of CSS files in Yii Framework

    How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?

    How to position html tag above an image and in the middle?

    How to shrink wrap floating content?

    How to remove the circle in the background of the impress.js demo

    how to trigger “onMouseOut” from click

    How to float elements in rows.

    How to format this form using only CSS

    how to stack elements using CSS

    In how many ways and places we can place comment in CSS?

    css “background-image” shows unwanted border, img “src” does not

    How to set a spinner into the middle of the screen with CSS?

    How can I prevent my layout from disrupting when a Javascript function runs?