css - 在移动 View 中将产品类别对齐到顶部

Question

我的 Woocommerce 商店有一个小问题。

目前进入my shop当从智能手机(小)屏幕宽度检查时，它显示 Product category 小部件到顶部，但我想将它放在顶部。

这是我从该元素获得的 CSS:

.sidebar.widget_area .sidebar_inner.widget_area_inner {
    margin-right: 0;
}

有人可以帮助我如何将该小部件定位到商店页面的顶部吗？

Answer 1

这是因为您的标记结构会将您的小部件 sidebar 推到下方。在标记中，您将 content 作为第一个子项，将 sidebar 小部件作为第二个(下一个)子项。

有两种可能的解决方案:

1. 特定移动屏幕的 CSS 属性。 [Prefreable]

2. 重新排列您的 HTML 标记。

---

CSS 解决方案

您可以使用针对小屏幕尺寸的 display flex 属性，如下所示:

@media only screen and (max-width: 960px) {
  .content_wrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  }
  .sidebar_left .sidebar.widget_area {
    -ms-flex-order: 1;
    order:1;
    margin-bottom: 3em;
  }
  .sidebar_left .content {
    -ms-flex-order: 2;
    order:2;
  }
}

You can place above CSS code at line no. 878, of responsive.css file. Right before your media query for screen width below 767px starts.

---

HTML 解决方案

您可以在 content_wrap 中交换具有类 .sidebar 和 .content 的元素。

希望答案对您有所帮助。