Комментарии pushing sidebar down

-1

Я работаю над созданием своей первой отзывчивой темы WordPress. Я столкнулся с некоторыми проблемами при работе над single.php и comments.php. По какой-то причине раздел комментариев подталкивает боковую панель вниз. У меня также проблемы с комментариями, которые, я думаю, могут быть частью проблемы, потому что, когда я полностью удаляю раздел комментариев с single.php, все правильно строит.Комментарии pushing sidebar down

Вот ссылка на страницу, я говорю о http://mockup.artxwpn.com/2017/01/19/hello-world/

источник

2017-01-19 Kris

Добро пожаловать на переполнение стека! Сначала вы можете взять [тур] (http://stackoverflow.com/tour) и узнать [Как задать хороший вопрос] (http://stackoverflow.com/help/how-to-ask) и создать [ Minimal, Complete и Verifiable] (http://stackoverflow.com/help/mcve). Нам будет легче помочь вам. –

Просто измените CSS от .container::after, .row::after, .u-cf от display: block; до display: inline; на линии 419 от style.css

Полный пример:

.container::after, .row::after, .u-cf { 
    clear: both; 
    content: ""; 
    display: inline; 
}

источник

2017-01-19 07:10:33

Это помогло загрузиться! – Kris

Мне было интересно, могу ли я получить ваш совет на другой странице с аналогичной проблемой. Теперь моя боковая панель толкается вниз, и я не могу понять, что ее вызывает. [link] (http://mockup.artxwpn.com/lifestyle/) – Kris

Похоже, вы поняли, да? –

-1

Это потому, что ваш #comment и #submit имеет фиксированное значение ширины. Попробуйте использовать медиа-запросы, или просто изменить width:600px к width:100% Как это:

#comment { 
     background: #fff; 
     color: #000; 
     border-color: #efefef; 
     font-size: 15px; 
     font-style: normal; 
     font-weight: normal; 
     width: 100%; 
     padding: 5px; 
     border: 1px solid #000; 
     height: 100px; 
     margin: 10px 15px 10px 0px; 
     -webkit-box-shadow: inset 0px 0px 15px -10px rgba(0,0,0,0.75); 
     -moz-box-shadow: inset 0px 0px 15px -10px rgba(0,0,0,0.75); 
     box-shadow: inset 0px 0px 15px -10px rgba(0,0,0,0.75); 
     font-family: 'Quicksand', sans-serif; 
     border: 1px solid #f1f1f1; 
    } 


    #submit { 
     width: 100%; 
     height: 55px; 
     font-size: 17px; 
     line-height: normal; 
     border: 1px solid #000; 
     color: #fff; 
     background: #000; 
     font-family: 'Quicksand', sans-serif; 
     text-transform: uppercase; 
    }

источник

2017-01-19 07:04:04

сделаю! Спасибо! – Kris

-1

Вы закрыли строку перед боковой панелью, вам нужно сохранить один ряд, чтобы он был правильно выровнен. Структура html должна быть такой. Он будет выровнен боковую панель правильно

<div class="row"> 
<div class="eight columns" id="content"></div> 
<div class="four columns" id="sidebar"></div> 
</div>

Для вас теперь ваш HTML структура как этот

<div class="row"> 
    <div class="eight columns" id="content"></div> 
</div> 
<div class="four columns" id="sidebar"></div>

источник

2017-01-19 07:19:29

Ой, я чувствую себя настолько глупо, я не могу поверить, что пропустил это. Спасибо огромное! – Kris

-1

боковой панели не было проведено в той же <div class="row"></div>, кажется, вы загружаете его впоследствии.

Попробуйте включить его в те же row.

<div class="row"><!-- Open row --> 
    <div class="eight columns" id="content"> <!-- Open Content --> 
     <!--Post Content--> 
    </div> <!-- Close Content --> 
    <div class="four columns" id="sidebar"> <!-- Open Sidebar --> 
     <!--Sidebar Content--> 
    </div> <!-- Close Sidebar --> 
</div> <!-- Close row -->

Я тестировал это на консоли Google Chrome, и он работает.