Форум Сайтостроение Веб-строительство

Почему съезжают вниз слова при просмотре на планшете

С8
На сайте с 23.08.2012
Offline
108
Сабрина87
937

Здравствуйте! При просмотре на обычном компьютере все отображается корректно, но при просмотре на планшете меню и "заказать звонок" съезжают вниз, также надпись "Ведущая мероприятий... " сдвигается, подскажите, плиз, в чем может быть причина.

Код css

#header{
        background: linear-gradient(to top, #ffffff, #4a5bf9);
        min-width:1000px;
        width: 100%;
        height: 208px;                                                  
        margin: 0;
        padding: 0;
}



#wrapper{
  width:1000px;
  margin:auto; /* Чтобы меню располагалось по центру экрана в майне */
}


#sh{
  width:400px;
  color:#f6f852;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);
  font-size: 35px;
} 



#zvonok{ /* Стили для кнопки "заказать звонок" */
       float:right;
       width:auto;
       height:50px;
       background-repeat: no-repeat;
       margin-right:25px;
       margin-top:-130px;

}



#zvonok .moduletable #form_vopros1{
       width:450px;
       height:50px;
       font-size:29px;
       font-family: sans-serif;

}




#zvonok a#show_callback{
     display:block;
     width:450px;
     height:47px;
     padding-left:10px;
     padding-top:7px;
     color:#f6f852;
     text-shadow: 0 0 10px rgba(0,0,0,0.8);
     text-decoration: none;
     background: linear-gradient(to top, #7eb5f9, #ffffff);
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
}




#zvonok a#show_callback:hover{
       background: linear-gradient(to top, #ffffff, #7eb5f9);
}



.zakazat {/* Стили для кнопки "заказать" */
     margin-top:8px;
}



.zakazat a#show_callback{/* Стили для кнопки "заказать" */
     display:block;
     width:190px;
     height:25px;
     font-size:23px;
     font-weight:bold;
     padding-bottom:9px;
     color:#9f0e18;
     text-decoration: none;
     background: linear-gradient(to top, #7eb5f9, #ffffff);
     box-shadow: 0 0 10px rgba(0,0,0,0.5);
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;

}



.zakazat a#show_callback:hover{/* Стили для кнопки "заказать" */
             background: linear-gradient(to top, #ffffff, #7eb5f9);
}



#tel{
   padding-top: 20px;
   color:#ffffff;
   text-shadow: 0 0 10px rgba(0,0,0,0.7);
   font-size:48px;
   font-family: sans-serif;
}




p{
        text-indent:2em;
        margin-top:0px;  
        margin-left:50px;
        margin-right:50px;
}



body{  
      background-color:#ffffff;
      width:100%;
      height:auto;
      margin:0px;
      padding:0px;
      color:#9f0e18;
      font-family: "Comic Sans MS", "Trebuchet MS", "Times", "Times New Roman", monospace, serif;
} 




.main{ 
      width:1000px;
      padding-top:13px;
      margin-bottom:13px;
      margin:auto; /* Чтобы майн располагался по центру экрана */
      overflow:auto; /* Чтобы текст не выходил за пределы контейнера */
      background-color:rgba(255,255,255,0.7);
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px 15px 0 0;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
}



#top_menu{
      width:1000px;
      margin-top: 23px;
      padding-left: 5px;
      height:40px; 
      font-size:22px;
      font-weight:bold;
      font-family: "Comic Sans MS", "Trebuchet MS", "Times", "Times New Roman", monospace, serif;

}  


#top_menu .moduletable li{

    list-style:none; /* Убираем стили списка, чтобы элементы не находились друг под другом и небыло маркеров */
    float:left;
    margin-left: 3%;
    margin-right: 3%;
}



#top_menu a {
        color:#9f0e18;
        text-decoration:none;
}



#top_menu  a:hover {
        color: #3c8ff6;
        text-decoration:none; 
}

html код

<html>


<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

<jdoc:include type="head" />


</head>

<body>




  <div id="header">


    <div id="wrapper">

      <div id="sh">


       </div>


        <div id="zvonok"> 

         <jdoc:include type="modules" name="Call Back" style="xhtml" />
          </br>
          <span id="tel">&nbsp;&nbsp;&nbsp;&nbsp;8 903 312 86 36 </span>

        </div>


       <div id="top_menu">


         <jdoc:include type="modules" name="top_menu" style="xhtml" />


       </div>

    </div>

</div>
kaskentbobel
На сайте с 24.09.2012
Offline
171
kaskentbobel
#1

Наверное потому что верстка не адаптированная у вас на лендинге - в этом и причина.

WR
На сайте с 17.06.2015
Offline
0
WebReactor
#2

Допишите пожалуйста вот такой тег <meta name="viewport" content="width=device-width"> должно полегчать=).

Верстка у Вас не адаптивная. Что бы всё было красиво надо использовать media queries. Если верстку делали сами советую почитать статью http://habrahabr.ru/post/119127/ и сделать её адаптивной.

Ещё одно маленькое замечание. Если Вы используете id для идентификации тега, то запись в стилях #zvonok .moduletable #form_vopros1{} можно заменить просто на #form_vopros1{}.

Адаптивная верстка и проблема Какой meta-тег viewport лучше Как я повысил цену
LPMaster
На сайте с 04.05.2015
Offline
17
LPMaster
#3

CSS медиа запросы в помощь, там достаточно просто разобраться, зато легко добьетесь адаптивности

↓ Эффективный инструмент продаж ↓ Landing Page "под ключ". Конверсия до 40%. Быстрая окупаемость! (/ru/forum/895446) Не уверен в эффективности? тогда для тебя бесплатный лендинг + заявки (/ru/forum/935663)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий