我有一个网站:www.ribbonhill.co.uk 我一直在尝试去掉右边的一个空白,出现在手机上。
奇怪的是,它在 Chrome 和 Edge 浏览器上都没有出现在完整模式下,但是当它被调整为小的时候,问题只出现在 Edge 而不是 Chrome 上。
该站点是使用 Django-oscar 构建的,本身没有任何问题。
我试过删除两个 CSS 文件,但没有空白。这两个文件是 ribbonhill.css 和 w3.css。
删除 w3.css 后只有一小块空白,但删除 ribbomhill.css 会留下很大的空间。
我一直在尝试删除一些代码,但很吃力。
我试过了
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
html,
body{
width:100%;
overflow-x:hidden;
}
}
和
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
但仍然没有运气。
最佳答案
我分析了你的网站www.ribbonhill.co.uk .这是一个小的 CSS 不匹配。
- 在
navbar
中删除用于站点 Logo 的min-width: 400px;
和width:80%
它不是一个有效的输入值.
如下更改您的 CSS:
.logo { margin-left: 50%; transform: translateX(-50%); min-width: auto !important; }
- 为您的
.footer
类移除padding: 2rem 0 0;
。因为它会影响容器填充。
应该是这样的:
.footer, footer {padding-top: 20rem;margin-bottom: 0rem; }
关于html - 右侧的额外空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55408764/