Where should I change the code to make it mobile friendly?

A

Alexander Konovalov2014-06-01 17:17:56

css

Alexander Konovalov, 2014-06-01 17:17:56

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PayForInstall.ru</title>
  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <script type="text/javascript" src="/js/script.js"></script>
  <script type='text/javascript' src='/js/jquery.scrollTo-1.4.3.1.js'></script>
   
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/mobile.css" media="only screen and (max-device-width:480px)"/>
  <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
  <header class="header">
    <div class="top"><!--top-->
      <div class="wrap">
        <div class="logo">
          <a href="/"></a>
        </div>
        <div class="head-menu">
          <ul>
            <li><a href="login/this_avto.php">Войти</a></li>
            <li><a href="login/register.php">Регистрация</a></li>
            <li><a class="two" href="#2">Как это работает?</a></li>
            <li><a class="two" href="#3">Часто задаваемые вопросы</a></li>
            <div class="clear"></div>
          </ul>
        </div>
        <div class="clear"></div>
      </div>
    </div><!--top-->
    <div class="wrap">
      <h1>Скачивай приложения</h1>
      <h1>и получай за это деньги</h1>
      <div class="regist"><!--regist-->
        <div class="text-bl">
        </div>
        <div class="include">
          
        </div>
      </div><!--regist-->
    </div>
  </header>
  <section id="2" class="work"><!--work-->
    <div class="wrap">
      <h1>Как это работает</h1>
      <div class="work-block"><!--work-block-->
        <div class="point p1">
          <p>Регистрируйся</p>
          <p>Пройди простую регистрацию - укажи<br>e-mail и номер телефона, пароль<br>придет на почту.</p>
        </div>
        <div class="hand"></div>
        <div class="point p2">
          <p>Скачивай</p>
          <p>Выбирай приложения из списка,<br>загружай их и получай за это<br>деньги на свой счет.</p>
        </div>
        <div class="hand"></div>
        <div class="point p3">
          <p>Зарабатывай</p>
          <p>Заработанные деньги можно<br> вывести на баланс телефона,<br> либо на QIWI-кошелек.</p>
        </div>
        <div class="clear"></div>
      </div><!--work-block-->
    </div>
  </section><!--work-->

* {
  margin: 0;
  padding: 0;
}
html{
  height: 100%;
  width: 100%;
  }
body{
  position: relative;
  background-repeat: repeat;
  font-family: 'PT Sans', sans-serif;
}
input, button, textarea {
  outline: none;
  border: 0;
}
input[type="submit"], button{
  cursor: pointer;
  display: block;
}

input[type="text"]{
  display: block;
}
b{
  display: block;
  font-weight: normal;
}
h1, h2, h3, h4, h5, h6{
  font-weight: normal;
}
section, header, footer{
  position: relative;
  min-width: 1100px;
  width: 100%;
  background-position: center top;
  background-repeat: no-repeat;
}
a, img{
  display: block;
  text-decoration: none;
}
ul{
  list-style: none;
}

:focus::-webkit-input-placeholder { 
  color: transparent;
}

:focus::-moz-input-placeholder { 
  color: transparent;
}
:focus::-input-placeholder { 
  color: transparent;
}



.wrap{
  width: 1060px;
  margin: auto;
  min-width: 1060px;
}
.wrapper{
  width: 1022px;
  margin: auto;
  min-width: 1022px; 
}
.clear{
  clear: both;
}

/*=======================================================*/

header{
  background-color: #2c3e50;
}
.header{
  padding-bottom: 63px;
}
header .top{
  height: 76px;
  border-bottom: 1px solid #263545;
}
.logo{
  float: left;
  padding-top: 20px;
}
.logo a{
  background: url(../img/logo.png) 0 0 no-repeat;
  width: 233px;
  height: 37px;
}
.head-menu{
  float: right;
  margin-top: 17px;
}
.head-menu ul li,
.head-menu2 ul li{
  float: left;
}
.head-menu ul li a,
.head-menu2 ul li a{
  color: #7e95ae;
  font-family: 'PT Sans', sans-serif;
  font-size: 15px;
  border-radius: 5px;
  border: 2px solid transparent;
  padding: 10px 15px 10px 15px; 
}
.head-menu ul li a:hover{
  color: #fff;
  border: 2px solid #fff;
}
header h1{
  text-align: center;
  color: #fff;
  font-size: 55px;
    font-family: 'PT Sans', sans-serif;
}
header h1:first-child{
  font-size: 72px;
  padding-top: 47px;
}

Where do I need to make changes to have a mobile version?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

B

batchar, 2014-06-01
@Huf

jQuery Mobile to the rescue.