html mobile

Solutions on MaxInterview for html mobile by the best coders in the world

showing results for - "html mobile"
29 Sep 2016
1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1.0">
5<style>
6* {
7  box-sizing: border-box;
8}
9.menu {
10  float: left;
11  width: 20%;
12}
13.menuitem {
14  padding: 8px;
15  margin-top: 7px;
16  border-bottom: 1px solid #f1f1f1;
17}
18.main {
19  float: left;
20  width: 60%;
21  padding: 0 20px;
22  overflow: hidden;
23}
24.right {
25  background-color: lightblue;
26  float: left;
27  width: 20%;
28  padding: 10px 15px;
29  margin-top: 7px;
30}
31
32@media only screen and (max-width:800px) {
33  /* For tablets: */
34  .main {
35    width: 80%;
36    padding: 0;
37  }
38  .right {
39    width: 100%;
40  }
41}
42@media only screen and (max-width:500px) {
43  /* For mobile phones: */
44  .menu, .main, .right {
45    width: 100%;
46  }
47}
48</style>
49</head>
50<body style="font-family:Verdana;">
51
52<div style="background-color:#f1f1f1;padding:15px;">
53  <h1>Responsive Web Design</h1>
54  <h3>Resize the browser window</h3>
55</div>
56
57<div style="overflow:auto">
58  <div class="menu">
59
60  </div>
61
62  <div class="main">
63    <h2>Design</h2>
64    <p>This is a responsive image for mobile and small devices</p>
65    <img src="https://ca.slack-edge.com/TKUEN70GY-U028U5PBP53-14b3f7e82463-512" style="width:100%">
66  </div>
67
68  <div class="right">
69    <h2>What?</h2>
70    <p>
71Responsive web design is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. Responsive design serves all devices with the same code that adjusts for screen size.</p>
72  </div>
73</div>
74
75
76<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This is a project made by yasin </div>
77
78</body>
79</html>
80