Responsive Padding Trouble

我设计了一个教程的响应式网页，我有一个不必要的填充问题。Responsive Padding Trouble

http://zinzinzibidi.com/res

在此页面中，当你降低你的浏览器窗口的分辨率，你会看到在一些决议，水平滚动条（溢出-X）。我想了解，但我无法解决这个问题几天。

这里是我的麻烦的一个示例图片：

enter image description here

我的CSS代码这里：http://zinzinzibidi.com/Areas/res/Content/css/style.css

我的媒体屏幕代码

My CSS codes

我在做什么错误？

来源

2014-08-29 Mr. Zoidberg

看起来是一个内部项目造成的问题。从＃header-main-buffer中删除填充，它应该消失。

行文件的515：

#header-main-buffer { 
    width: 300px; 
    padding: 0 10px; <- this is your problem. remove it and it will be fixed 
    ...

来源

2014-09-05 03:43:27 ericjbasti

谢谢你现在工作正常。你可以检查出来。顺便说一下，你是怎么注意到这个问题的？ 300px的宽度和10px的右边距+10px左边的填充物响应320px媒体屏幕宽度（？） – 2014-09-05 04:45:22

＃head-container具有完全相同的宽度和填充，所以其内部元素将从10px开始向右填充它。你真的可以摆脱＃head-container上的填充，它应该可以工作，它只是缓冲项目对我来说似乎更方便。 – ericjbasti 2014-09-05 14:08:23

你也可以通过设置'box-sizing：border-box'避免将来出现这种情况;'你应该看看那个（[解释borderbox的链接]（http://www.paulirish.com/2012/box-sizing -border-box-ftw /）），因为它会导致填充进入元素宽度，所以你实际上会这样写：'width：100％;填充：0 10px;盒子大小：边框;' – ericjbasti 2014-09-05 14:28:44

我检查了你的代码，它可能是你的<div id="header-logo">创建额外的填充。

由于img在屏幕上的固定宽度为300px，因此小于tit会在右侧创建额外的填充以适合屏幕。

尝试降低

@media screen and (max-width: 479px) and (min-width: 320px) { 
#header-container { 
    width:; 
} 
}

编辑

基本上勾选所有你使用，所以你要确保它们的宽度是适当的，他们适应屏幕的img。

来源

2014-08-29 19:49:01 mencina

这个问题也已经在其他媒体上的屏幕。所以这与图像分辨率无关。 – 2014-08-29 21:11:39

Responsive Padding Trouble

回答

相关问题