平板电脑中不需要的CSS网站填充&am​​p;移动

时间:2013-10-23 20:13:47

标签: css wordpress wordpress-thesis-theme

我创建了一个PSD的网站,所有相对基本的CSS。我在移动设备和平板电脑上有不需要的外部填充。我希望站点的左右边缘与浏览器的边缘齐平。它大约20px的不需要的填充。

请参阅我的开发网站: http://america.82ndmedia.com/

我已经测试了删除容器div的“margin:0 auto”并修复了它...但是我需要它才能在桌面上运行。

.container {
width: $w_total;
margin: 0 auto;
}

任何提示将不胜感激。谢谢!

2 个答案:

答案 0 :(得分:1)

这是由规则引起的:

@media (max-width: 450px) {
   .header, .columns > .sidebar, .post_box, .prev_next, .comments_intro,
   .comment, .comment_nav, #commentform, .comment_form_title, .footer {
       padding-right: 13px;
       padding-left: 13px;
}

以某种方式移除或覆盖此规则。

答案 1 :(得分:0)

我建议使用百分比而不是像素,因为您当前的设置无法正常工作,并且难以使用硬编码像素进行响应式设计。

例如,您的主要包装div class="container"在较小的屏幕上设置为max-width 717px (似乎是随机的),但在其中您将id="blog"等元素设置为width 1020px,这显然不适合。

如果您将这些内部元素设置为其外部容器的百分比,那么它将更容易使其工作,并且它将真正响应流体