Комментарии толкают боковую панель вниз
Я работаю над созданием моей первой адаптивной темы WordPress. Я столкнулся с некоторыми проблемами, работая над single.php и comments.php. По некоторым причинам секция комментариев выдвигает боковую панель вниз. У меня также возникают проблемы с адаптацией комментариев, что, я думаю, может быть частью проблемы, потому что, когда я полностью удаляю раздел комментариев из файла single.php, все выстраивается правильно.
Вот ссылка на страницу, о которой я говорю http://mockup.artxwpn.com/2017/01/19/hello-world/
Решение
Просто измените 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;
}
Другие решения
Это потому что твой #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;
}
Вы закрыли ряд перед боковой панелью, вам нужно держать в одном ряду, чтобы он выровнялся правильно.
Ваша 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>
Ваша боковая панель не находится в том же <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, и это работает.
detector