Это не проблема, когда я уменьшаю масштаб меньше исходного размера, но когда я увеличиваю, он покрывает мой контент. Это также происходит на экранах любого другого размера, кроме моего. У меня разрешение экрана 1366х768. Это мой сайт: http://justiceroulette.com/ «Правая боковая панель» появляется на всех страницах, кроме домашней.
Я создал эту тему сам по себе, и это моя первая тема, поэтому я ожидал, что будут исправлены ошибки, но я не уверен, как адаптировать мою тему к разным размерам экрана, пока не узнаю, что тема даже работает правильно на размер «по умолчанию». Почему боковая панель просто не выглядит больше, как остальная часть страницы, а не перемещается влево, когда я увеличиваю ее или просматриваю на телефоне?
Вот скриншоты на случай, если люди, которые читают это, не разделяют мой размер экрана: https://sta.sh/212zs5aq86oy?edit=1
Я предоставлю любой запрашиваемый код. У меня есть много файлов php, чтобы собрать эту тему вместе, включая несколько файлов CSS.
Заранее спасибо всем, кто пытается помочь.
РЕДАКТИРОВАТЬ
Я скомпилировал весь соответствующий код вместе и проверил, не исчезнет ли проблема, если я скомпилирую заголовок, боковые панели, тело и нижний колонтитул в одном файле. Это то же самое.
Вещи, которые я сделал, чтобы попытаться решить эту проблему, включают в себя:
-Изменение #ad от отступления до div
-Пробовать разные «позиции» в CSS, кроме относительных
-Изменение «float: right» на «clear: left» или «clear: both»
-Добавление «ширина: 100%;» под «html, body»
Ничто из этого, казалось, ничего не изменило.
<div id='site-content'>
<div id="comic-wrapper">
<section id="comic">
Content goes here.
</section>
</div>
<aside id="ads">
<div align="center">
<a href="https://www.patreon.com/ispazzykitty"><img src="http://i.imgur.com/PQEvTVF.png" width="197px" height="240px"></a>
<a href="https://www.youtube.com/channel/UC8f1XRc2GAUJ9UXIsr72Pfg"><img src="http://i.imgur.com/YBOGFHb.png" width="197px" height="240px"></a>
<a href="https://ispazzykitty.deviantart.com/journal/New-Commission-Price-Guide-700723632"><img src="http://i.imgur.com/aN1UnKc.png" width="197px" height="361px"></a>
<p></p>
</div>
</aside>
</div> <!-- site content -->
<div id='site-footer'>
Justice Roulette is © Starr Law, 2014-<?php echo date ('Y'); ?>.
<br>
</div>
</body>
</html>
Вот CSS:
html, body{
background-color: #002A0C;
background-image: url(http://i.imgur.com/bux1YSO.png);
padding: 0;
margin: 0;
border: 0;
width: 100%;
}
#comic-wrapper{
width: 1032px;
min-height: 779px;
position: absolute;
left: 97px;
}
#ads{
background-color: clear;
float: right;
width: 220px;
height: 1000px;
position: relative;
top: 10px;
}
#comic{
background-color: #078E2D;
background-image: url(http://i.imgur.com/cWA1Zj0.png);
height: 859px;
width: auto;
}
.comicpagespace{
margin-top: 10px;
width: 954px;
height: 536px;
}
img{
max-width: 100%;
max-height: 100%;
}
#site-footer {
clear: both;
text-align: center;
width: auto;
padding: 10px;
background-color: #150028;
color: #E2F7ED;
font-family: "Dosis", "Liberation Sans", sans-serif;
line-height: 20px;
}
Задача ещё не решена.
Других решений пока нет …