列响应行为和故障。在移动设备上显示 2x3 列与 1x6 列（HTML 访问受限）

Question

我使用的是 Avada Fusion 主题，因此我对编辑核心主题 HTML 文件的访问权限有限。

不过我可以访问自定义 CSS。

我无法在移动设备上仅在 800 像素媒体屏幕下将以下列显示为 2x3 而不是 1x6：

IMAGE showing mobile view of issue

这是显示问题的页面（2017 年 6 月 20 日）请务必切换到移动视图：

https://zeralynx.co.uk

这是我正在使用的 CSS，所有 6 列都具有相同的 ID 选择器 "home-product-tiles":

@media only screen and (max-width: 800px) {
#home-product-tiles {
    width: 47% !important;
    display: inline !important;
    float: left !important;
    margin-right: 2% !important;
    overflow: hidden !important;
}
}

我不明白为什么第 4 列（在桌面视图中是第二行的第一列）不会浮动到第三列（在桌面视图中是第一行的最后一个）的右侧查看）。

请帮助我，我将不胜感激，我敢打赌这很容易解决！

此致，扎克

Answer 1

那是因为您的列的高度不相等。也不要同时使用 display:inline 和 float:left 。他们本质上是在做同样的事情。

您可以使用 display:flex 来等于列的高度。请参阅下面的示例片段

wrapper {
  display: flex;
  flex-wrap: wrap;
}

div {
  float: left;
  width: 49%;
  margin-right: 2%;
  display: inline;
}

div:nth-child(even) {
  margin-right: 0;
}

<wrapper>
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h2>
Some text
</h2>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x250">
    <h2>Some text</h2>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x50">
    <h2>Some text</h2>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x450">
    <h2>Some text</h2>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h2>Some text</h2>
  </div>
</wrapper>

Answer 2

已解决

谢谢米海T和CBroe

我将下面的 ID "home-product-tiles-wrapper" 应用到包含 6 列的 Avada Fusion Container，然后添加到 display: flex & flex-wrap: wrap 中，如下所示。

@media only screen and (max-width: 800px) {
#home-product-tiles-wrapper .fusion-row {
  display: flex !important;
  flex-wrap: wrap !important;
}
#home-product-tiles {
    width: 48% !important;
    margin-right: 2% !important;
    float: left !important;
    display: inline !important;
}
}

这不是我需要的以前的样子： SCREENSHOT BEFORE

它现在按照我希望的样子显示在这个屏幕截图中： SCREENSHOT AFTER

再次感谢！

列响应行为和故障。在移动设备上显示 2x3 列与 1x6 列（HTML 访问受限）

Column responsive behavior and breakdown. Display columns 2x3 vs. 1x6 on mobile (with limited HTML access)

html

css

woocommerce

responsive