右侧空白，仅适用于移动设备

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雷姆。

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