Question

我不确定这里要包含什么，我已经浏览了网站上的每个width，并且无法弄清楚为什么我在移动设备上看到我的网站右边缘。

这是一个链接 http://m.mdmobile.hailstorm-technologies.com/ 我试过了

overflow:hidden;和body css中的

html，虽然这解决了手机上的问题但我无法在桌面上向下滚动。

我为overflow-x:hidden和body尝试了html，再一次，这适用于移动设备，但在缩小的桌面浏览器上添加了第二个垂直滚动条。

html {

margin: 0;
padding: 0;
width:100%;
overflow-x:hidden;



}

body { 
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
background-image: url('../image/background-pattern.jpg'); 
width:100%;
overflow-x:hidden;  


}

我还包括这个......

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Answer 1

以下行导致此

#header #welcome {
float: left; /* remove this */
z-index: 5;
text-align: left;
color: #006f51;
position: relative;
}

编辑：仍有一些余地，删除此以及

#header #cart .heading a {
color: #006f51;
text-decoration: none;
float: right;
text-decoration: underline;
margin-right: -10px; /* remove this  */
padding: 6px 10px 6px 30px;
clear: both;
font-size: 17px;
}

无法解决移动设备的溢出问题

1 个答案: