CODEWITHSUNDEEP
csswordpresswoocommerce
DrMTR
DrMTR

Reputation: 509

Allign product category to top in mobile view

I have one small problem with my Woocommerce shop.

Currently into my shop when check from smartphone(small) screen widths, its showing Product category widget to top, but I want to place it to top.

This is CSS that I get from that element:

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

Can someone to help me how to position that widget to top of shop page?

Upvotes: 0

Views: 1523

Answers (2)

divy3993
divy3993

Reputation: 5810

It is because you have Markup structure in such a way that pushes your widget sidebar to below. As in markup you have content as first child and sidebar widget as second(next) child.

There are two possible solutions to this:

1. CSS properties for specific mobile screens. [Prefreable]

2. Rearranging your HTML Markup.

CSS Solution

You can use display flex properties targeting small screen size, which as follows:

@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 Solution

You can swap your elements having class .sidebar and .content inside your content_wrap.

enter image description here

Hope the answer helps you out.

Upvotes: 1

sarathkumar
sarathkumar

Reputation: 191

Product category widget is coming down because in html its order is below the content div.

Currently the div structure is like this 

<div class="content_wrap">
  <div class="content">
  </div>
  <div class="sidebar widget_area scheme_original">
  </div>
</div>

Change this to this foramte

<div class="content_wrap">
  <div class="sidebar widget_area scheme_original">
  </div>
  <div class="content">
  </div>
</div>

Upvotes: 1

Related Questions