html - 移动容器宽度不正确与桌面

Question

我接管了一家公司的网站，当它交给我时，我花了很多功夫才把它放到现在的位置。网站上的一些内容，所有者想要保留，一些他们允许我更改。我现在想弄清楚的一件事是如何让移动版本与桌面版本保持一致。似乎在纵向模式下，容器宽度太小；右边有空间，一些图像重叠。我已经尝试了其他线程中的建议，这些建议似乎在问同样的问题，但没有任何效果，所以我想我会发布我自己的问题，以防我更改了错误的代码。

我补充说:

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

并在 css 中寻找几乎任何“宽度”，但无济于事。我还缺少什么？

这是网站:

http://leisurelandrvcenter.com/

特别是“库存”页面:

http://leisurelandrvcenter.com/inventory/

-免责声明-

这似乎只发生在某些设备上，而且只发生在纵向模式下。横向模式在选中的设备上运行良好(仅限安卓)。提前致谢!

Answer 1

如果你想让它响应，你必须摆脱 css 上的所有固定宽度，例如:

如果您想让库存页面响应，您必须编辑以下 CSS:

#layout-content {
    width: 1285px;
}

为此:

#layout-content {
    max-width: 1285px;
    width: auto;
}

然后为了调整图像(例如 Logo )的大小，您必须设置以下 css:

img { max-width:100%; width:auto; }

您不应使用 img 标签，而应使用 Logo 的 css 类或 ID 或您想要响应的任何图像。