Question

警告：我远不是一名CSS响应专家。

在http://www.ebay.com/itm/281357771624，您会看到我正在处理的模板。在eBay Mobile应用程序中，第一列较窄，应该是第二列的宽度（移动屏幕的全宽）。

由于eBay将模板放入iframe，您应该右键单击模板区域以仅查看框架，然后您可以查看源代码。（否则你不会看到模板的代码。）BTW，必须是CSS＆amp;仅限HTML - 没有javascript。

你可以帮我说这种新手可以理解吗？

Answer 1

您添加了一个媒体查询，使第1列更宽，如下所示：

@media (max-width: 1000px)
.col_1col {
    width: 100%;
    margin: 0;
}

但是你没有用第2列做到这一点，它仍然采用这样的默认百分比：

.col_2col {
    vertical-align: top;
    position: relative;
    padding: 0;
    margin: 0;
    width: 28.5%;
    height: auto;
    display: inline-block;
    margin: .5%;
    z-index: 1;
}

您需要将此添加到上面的媒体查询中，以使百分比为100％...

@media (max-width: 1000px)
.col_1col, .col_2col {
    width: 100%;
    margin: 0;
}

如果你需要任何帮助，我会建立这些以谋生......

移动设备上的一栏太窄了

1 个答案: