右侧的空白，仅在移动设备上

Question

我在页面右侧看到这条垂直的白线。 它只发生在移动设备上。 使用设备工具栏找到它： https://jood19.sg-host.com/

我设计了“移动优先”网站。 仅用于桌面的媒体查询。

我试过了，没有成功，下面的代码

html body{
    width: 100%;
    margin: 0; 
    padding: 0;
    overflow-x: hidden;
}

你能推荐一些东西吗？

Answer 1

这是因为您的图像有一个设定的宽度，恰好比手机屏幕宽。

如果为图像添加最大宽度，则可以保持设置的宽度。 这将意味着它将与您最初的大小相同，除非屏幕太小，然后它将占据整个宽度。

.about-section img {
    width: 28rem;
    max-width: 100%;
}

Answer 2

在开发工具上设置您的.about-section img似乎可以删除空格。 尝试在移动屏幕上使用 21 rem。

.about-section img {
    width: 21rem;
}