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

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

当前从智能手机（小）屏幕宽度检查时进入my shop，其显示的产品类别小部件位于顶部，但我想将其置于顶部。

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

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

有人可以帮我如何将小部件放置在商店页面的顶部吗？

最佳答案

这是因为您具有标记结构，从而将窗口小部件sidebar推到下面。就像在标记中一样，您将content作为第一个孩子，将sidebar小部件作为第二（下一个）孩子。

有两种可能的解决方案：

1.特定手机屏幕的CSS属性。 [推荐]

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



CSS解决方案

您可以使用针对较小屏幕尺寸的显示弯曲属性，如下所示：

@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;
  }
}

  您可以将CSS代码放在行号上方。 878，responsive.css文件。在您开始查询媒体宽度低于767px的媒体之前。




HTML解决方案

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



希望答案能帮助您。