Отступ справа на мобильной версии сайта - HTML, CSS - Ответ 13291322

@DSLS · Регистрация: 02.03.2016

Студворк — интернет-сервис помощи студентам

Добрый день.

Есть php/html страница.

PHP

<!doctype html>
<?php
require_once("connect.php");
require_once("search_dia.php");
require_once("vars.php");
session_start();
 
?>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Главная страница</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/style_mobile.css">
<script src="scripts/jquery-3.2.1.min.js"></script>
<script src="scripts/carhartl-jquery-cookie-92b7715/jquery.cookie.js"></script>
<script src="scripts/script_style.js"></script>
    
</head>
 
    <body>
    <div class="wrapper">
    <header class="index_header">
        
        <a href="index.php"><img src="images/logo.png" class="header_logo"></a>
        
    <?php
        search_dia($dbc);
        if(isset($_SESSION['user_id'])){
        echo('<p class="login">Добро пожаловать, '.$_SESSION['username'].'. | <a href="logout.php">Выйти</a></p>'); 
        
            
    ?>
        
    </header>
        
         
            
        
        
        <section class="main">
            
            <div class="table_area">
                <div class="table_row">
        
            <div class="dialog_area">
            <span class="dia_h">Мои диалоги</span>
            <span class="saysay"><a href="index.php?cd=1">Рассказать +</a></span>
            <ul class="dialog_list">
                
                
                <?php
            search_dia($dbc);
            
            $query_dialogs="SELECT * from dia where autors_id='".$_SESSION['user_id']."' OR recipient_id='".$_SESSION['user_id']."' order by last_upd desc";
            $dialogs_result=mysqli_query($dbc, $query_dialogs) or die('ошибка запроса');
            if(mysqli_num_rows($dialogs_result)>0){
                //диалоги найдены
                while($row_result=mysqli_fetch_array($dialogs_result)){
                    
                $query_mes="SELECT sen_id from message where alogdi_id=".$row_result['dialogs_id']." order by sen_date desc";
                $mes_result=mysqli_query($dbc, $query_mes) or die('Error searching message');
                $mes_row=mysqli_fetch_array($mes_result);
                    
                if($mes_row['sender_id']==$_SESSION['user_id'] || (mysqli_num_rows($mes_result)==0 && $row_result['autors_id']==$_SESSION['user_id'])){
                    
                    
                echo "<li><a href='?di=".$row_result['dialogs_id']."'><span class='mail_icon'></span><span class='dia_prew'>Диалог</span>#<span class='dia_num'>".$row_result['dialogs_id']."</span></a></li>";} else{
                    //если автор сообщения не авторизованный юзер
                    echo "<li><a href='?di=".$row_result['dialogs_id']."'><span class='mail_icon mail_icon_new'></span><span class='dia_prew'>Диалог</span>#<span class='dia_num'>".$row_result['dialogs_id']."</span></a></li>";
                    
                   
                }
                    
                }
                
                
            }
            
            else{
                //диалоги не найдены
                
                
            }
            
            
            
            
                ?>
                
                
               
            
            
            
            </ul>
            
            </div>
            
            <div class="message_area">
                <span class="dia_h">Моя переписка</span>
            
            <ul class="message_list">
                
                <?php
            
            //блок кода создания диалога
            
            if(isset($_GET['cd']) && !empty($_SESSION['user_id'])){
                //все ок, вывести форму
                echo "<form method='post' action='".$_SERVER['PHP_SELF']."' class='create_dia'>
                <textarea class='create_inp' name='create_inp' placeholder='Введите текст сообщения' require></textarea> 
                <input type='submit' value='Отправить записку' class='input_submit input_create' name='create_but'/>
                
               
            
            
                
            </form>";
                
                
                
            }
            
            //блок когда создания диалога
            
            $last_li=0;
            if(isset($_GET['di']) && !empty($_SESSION['user_id'])){
                
                $query_dialog="SELECT * from dialogs where dialogs_id=".$_GET['di'];
                $query_dialog_result=mysqli_query($dbc,$query_dialog) or die ('ошибка доступа к диалогу');
                if(mysqli_num_rows($query_dialog_result)>0){
                    //такой диалог есть
                    $dialog_rr=mysqli_fetch_array($query_dialog_result); //строка с информацией о диалоге
                    if($dialog_rr['autors_id']==$_SESSION['user_id'] || $dialog_rr['recipient_id']==$_SESSION['user_id']){
                    //проверяем, что авторизованный пользователь либо автор либо получатель диалога    
                        
                        
                        
                    
                    if($dialog_rr['autors_id']==$_SESSION['user_id']){
                        
                        //если автор диалога авторизованный пользователей
                        $last_li=0;
                        echo "<li class='autor'>".$dialog_rr['caption']."</li>";
                    } else{
                        //если автор диалога кто-то другой
                        $last_li=1;
                        echo "<li class='rec'>".$dialog_rr['caption']."</li>";
                        
                    }
                        
                        $query_mes="SELECT * from message where (dialog_id =".$_GET['di']." AND recipient_id=".$_SESSION['user_id'].") OR (dialog_id=".$_GET['di']." AND sender_id=".$_SESSION['user_id'].") order by sending_date";
                        $query_mes_res=mysqli_query($dbc,$query_mes) or die ('ошибка доступа к сообщениям');
                        while($mes_row=mysqli_fetch_array($query_mes_res)){
                            //подгружаем сообщения
                            if($mes_row['sender_id']==$_SESSION['user_id']){
                                
                                //автор сообщения авторизованный пользователь
                                $last_li=0;
                                echo "<li class='autor'>".$mes_row['content']."</li>";
                            } else{
                                
                                //автор сообщения кто-то другой
                                $last_li=1;
                                echo "<li class='rec'>".$mes_row['content']."</li>";
                            }
                            
                            
                        }
                    
                    
                } else{
                        
                        //пользователь не имеет доступа к этому диалогу
                        echo "Ошибка доступа к диалогу";
                    }
            }
            
            }
            
            ?>
               
               
                
                
            </ul>
                
                
               <?php
            
            if($last_li==1){
                
          echo  "<form method='post' action='".$_SERVER['PHP_SELF']."' class='write_mes'>
                <input type='text' class='write_inp' name='write_inp' placeholder='Введите текст сообщения' require/> 
                <button type='submit' class='write_but' name='write_but'></button>
                <input type='hidden' name='did' value='".$_GET['di']."'>
               
            
            
                
            </form>";}
                
                ?>
                
          
            </div>
                    
                </div>
                
            </div>
        
        </section>
    <?php } else{
            
            //если пользователь не авторизован
            
            echo "
        
        <div class='img_cont'>
           <img src='images/poster2.png'/>
           
        
        <div class='reg_field'>
        <a href='registration.php'><span class='use_h index_h input_submit'>Регистрация</span></a>
        </div>    
        <span id='reg_accept'>Если у вас уже есть аккаунт пользователя, вы можете <a href='login.php' style='text-decoration:underline;text-decoration-style:dotted;'>авторизоваться</a>.</span>    
          
            
           </div> 
            
            ";
            
            
            
        } ?>
    
    
    <?php require_once('footer.php');?>
        </div>
    </body>
 
 
 
</html>

Для нее прописал стили для мобильных устройств

CSS

@media screen and (max-width:480px){
    
    html{
        max-width: 320px;
        border: 1px solid red;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden;
    }
   
.wrapper{
        
        height: 100%;
        overflow-x: hidden;
        margin: 0 auto;
        
    }
    
    .index_header{
        
        max-width: 320px;
        border: 1px solid red;
    }
 
    
    body{
        
    width: 320px !important;
 padding: 0px;
 
    font-family: Verdana, Helvetica, Arial, sans-serif;
   margin: 0px;
        margin-right: 1500px;
   overflow-x: hidden !important;
    position: relative;
    background-color: rgb(249,249,249);
    //box-shadow: 2px 1px 4px 0px rgba(220,220,220,1);
    
   
    }
    
    
    .header_logo{
        
        width: 75px;
    }
    
    .login{
        
        font-size: 12px;
    }
    
    .footer_ul{
        
        width: 280px;
        display: inline-block;
    }
    
    .dia_prew{
        
        display: none;
    }
    
    .mail_icon{
        
        width: 20px;
        height: 25px;
        margin-right: 0px;
    }
    
    .dia_num{
        
        font-size: 14px;
        margin-right: 7px;
    }
    
    .saysay{
        
        font-size: 14px;
        margin-bottom: 0px;
    }
    
    .table_area{
        
        display: inline-block;
    border-spacing: 0px;
    width: 320px;
    overflow-x: hidden;
    }
    
    .table_row{
        
        display: inline-block;
         vertical-align: top;
         border: none;
         margin:0px;
    }
    
    .dia_h{
        
        display: inline-block;
        font-size: 14px;
        margin:0px;
    }
    
    .dialog_area{
        
    display: block;
    vertical-align: top;
    position: relative;
    width: 320px;
    height: 100px;
    margin-bottom: 0px;
    margin:0px;
    //margin-top: 0px;
    }
    
    .dialog_list{
        
    list-style-type: none;
    margin: 0px;
    padding: 0 0 0 15px;
    //height: 95%;
    height: 50px;
    max-width: 320px;
        white-space: nowrap;
    }
    
    .dialog_list li{
         vertical-align: middle;
         margin: 0px;
        display: inline;
        
    }
    
    .message_area{
        
        display: inline-block;
        width: 100%;
        margin-top: 0px;
        margin:0px;
    vertical-align: top;
    position: relative;
    //top: 0px;
    //left: 450px;
    //border: 1px solid black;
    height: 100%;
    
    //max-width: 670px;
    }
    
    .message_list li{
        
        font-size: 12px;
        min-height: 20px;
    }
    
    .write_inp{
         height: 75px;
    width: 80%;
    margin-left: 12px;
}
    
    .write_but{
         height: 25px;
    width: 25px;
        
    }
        
    }
    
    
    
}

При загрузке страница подгружается нормально, то есть весь контент на экран телефона помещается, но появляется скролл бар внизу, который прокручивает какой-то невероятный отступ.

hidden для overflow-x проставил буквально везде, чтобы проверить, может какой-то элемент вылезает, но ничего не вылезает.

Даже если прописать border:1px solid red; для всех блоков, видно, что они умещаются друг в друге.

Если этот же border прописать к самому элементу html, то видно, что обведена страница, а справа от нее какой-то отступ, на который ничего не действует, ни margin, ни padding, ни hidden.

Подскажите как это убрать? Ведь на других сайтах мобильные версии отображаются без всяких полос.

Добавлено через 11 минут
Сейчас попробовал вообще убрать весь контент со страницы, и загрузил пустую, но с мобильной версии. Даже в пустой странице появляется эта непонятная полоса прокрутки. В чем может быть проблема?

Вернуться к обсуждению:
Отступ справа на мобильной версии сайта HTML, CSS

Следующий ответ

Другие темы раздела
HTML, CSS Массивы в HTML есть или нет? Я считаю что есть: <input name="a"> Здесь а - массив. Мало того, массив a может быть и многомерным - a Тогда что же это? https://www.cyberforum.ru/ html/ thread2397804.html	Некорректно отображается сайт HTML, CSS День добрый! Сразу прикреплю скриншоты чтобы было понятно, что я имею ввиду: Firefox + IE Хром и опера сайт: https://kodori.ru/ Ярлыки -svg. Сам разобраться не могу, у кого есть какие идеи?
HTML, CSS Отступ картинки от текса https://www.cyberforum.ru/ html/ thread2397699.html Задание было таковым: картинки обтекаются текстом. Картинки справа, текст слева. Когда я пробовал перенести только картинку вправо, то все было более-менее нормально, а когда вместе с подписью, то получается дичь вот такая вот: блин, как фотку загрузить-то, а? Добавлено через 1 час 1 минуту Вопрос решен, архивируйте.	HTML, CSS Не меняется шрифт https://www.cyberforum.ru/ html/ thread2397693.html Подскажите, пожалуйста, почему не меняется шрифт? <br><font face="Arial" size="7" color="Red">Перший фрагмент тексту</font> <br><font face="GothicG" size="3" color="Red">Другий фрагмент тексту</font> <br><font face="Verdana" size="1" color="Red">Третій фрагмент тексту</font>
Как создать (или подставить) шрифты под себя? HTML, CSS Есть один font-family: font-family:"swiss-capital"; SwissCapital - это компания. У них в CSS-ках есть этот типа "уникальный" шрифт, как это можно поменять? Например, на autocap. То есть чтобы выглядело как font-family:"autocap"; Добавлено через 8 минут Нужно изменить название самого шрифта, а его "стилистика", сам шрифт не был изменён, а только название	HTML, CSS Map на фоновой картинке - реально ли? Я сделал map- области ссылки на картинке. Картинка на всю ширину экрана, таким образом если уменьшать изображение окна, то картинка обрезается на равномерно со сторон. Поэтому возникает другой способ сделать map - на фоновом изображении. Можно ли сделать map на фоновом изображении? https://www.cyberforum.ru/ html/ thread2397670.html
HTML, CSS Дивы накладываются друг на друга https://www.cyberforum.ru/ html/ thread2397665.html Учусь верстать сайты по видио курсам. сейчас делаю пробный сайт. Сайт сам получился без проблем. Теперь началась адаптация под мобильные устройства (320px - 568px). Тут блоки почуяв приближение весны начали заезжать друг на друга. Текст стал совсем непонятным. Ещё меню суётся на картинку. помогите пожалуйста. Ссылка на проблемную страницу: http://worldoutlook.ru/films.html . Вот код: ...	HTML, CSS Адаптация сайта Сайт адаптирован но не весь, есть один блок с лого и поиском, в мобильном версии поиск уходит за рамки лого и виден только на половину, как и какой код прописать, что делать. ?
HTML, CSS Добавить документ на страницу https://www.cyberforum.ru/ html/ thread2397323.html Слева меню с документами, справа пространство где они должны открываться. Необходимо добавить документ (pdf, doc) на страницу из соответствующей папки на сайте. Желательно что бы он открывался в div, т.к. разметка резиновая и с iframe могу в дальнейшем накосячить. :P	HTML, CSS Как поставить вместо фона картинку Здравствуйте, требуется помощь Есть сайт на вордпресс, хочу поставить бекграунд картинку, но не получается Хотя некоторые представление есть но сам запутался скорей всего писать надо в header.php необходимый тег, вот ее код <?php ?><!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> https://www.cyberforum.ru/ html/ thread2397262.html
HTML, CSS Проблема с размещением блоков с текстом в разных браузерах Здравствуйте, делаю проект и столкнулся с такой проблемой. Разные браузера показывают данную дилему. Если открыть через Opera таблица будет закреплена с левой части. Если открыть через Crome то все работает стабильно. Сам же работаю через оперу, и когда залил на хостинг стало так. Не думаю что проблема в нем, тогда в чем же? Подскажите пожалуйста:( - опера - хром	HTML, CSS Ошибка при использовании атрибута alt https://www.cyberforum.ru/ html/ thread2397255.html Доброго времени суток, значит пишу я такой код: <img src="https://www.gstatic.com/images/branding/product/2x/photos_96dp.png" alt="Just photo" /> Все хорошо, картинка есть, если немного подпортить ссылку (сделать не рабочей) то вместо изображения пишет "Just photo", как и должно быть, но если я беру фото из папки с сайтом, то все дальше хорошо показывает, но если же я удаляю это фото, на...

	02.02.2019, 13:21