当缩小小于原始尺寸时,这不是问题,但是当我放大时,它会覆盖我的内容。这也发生在我自己的任何其他尺寸的屏幕上。我的屏幕分辨率是1366x768。这是我的网站:http://justiceroulette.com/"右侧边栏"出现在除主页之外的所有页面上。
我自己创建了这个主题,这是我的第一个主题,所以我预计会有错误被解决,但我不知道如何将我的主题调整到不同的屏幕尺寸直到我知道主题在"默认"尺寸。为什么侧边栏看起来不像页面的其他部分那样大而不是在我放大或在手机上查看时向左侧拍摄?
以下是截图,以防人们阅读此内容时不要分享我的屏幕尺寸:https://sta.sh/212zs5aq86oy?edit=1
我会提供所要求的任何代码。我有很多php文件将这个主题放在一起,包括多个CSS文件。
提前感谢任何试图提供帮助的人。
修改的
我已经将所有相关代码编译在一起,并且已经测试过,如果我在一个文件中编译标题,侧边栏,正文和页脚,问题是否仍然存在。它是一样的。
我尝试解决这个问题的方法包括:
- 将#ads从一边改为一个div
- 除了亲戚之外,在CSS中使用不同的"位置"
- 改变"浮动:正确"到"清除:左"或者"明确:两者都是"
- 添加"宽度: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;
}