Display the filter on different sizes of screens

ThemeBurn SupportForumsOpenCart ThemesBurnEngineDisplay the filter on different sizes of screens

This topic has been marked as not resolved.

I put the filter module in the left column, and filter on the mobile version is located at the bottom of the page.
Is it possible to put it after header in the mobile version and in the left position for desktops?

Thanks

 pobo3
September 10, 2018 at 3:48 pm #65362

Hi,

We will need a live example. Can you provide website url and admin access, so we can check?

You can use hidepost to share private information with the support staff.

BR,
ThemeBurn team

September 17, 2018 at 3:39 pm #65477

Yes of course

 pobo3
October 20, 2018 at 12:09 am #65866

Hi,

We’ve prepared some custom styles that will help you to achieve this:

@supports (display: contents) {
  @media (max-width: 768px) {
    #content > .row,
    .main,
    .main > .row-wrap,
    .main > .row-wrap > .row,
    .main > .row-wrap > .row > .col,
    .sidebar,
    .sidebar > .row-wrap,
    .sidebar > .row-wrap > .row,
    .sidebar > .row-wrap > .row > .col
    {
      display: contents !important;
    }
    #content {
      display: flex !important;
      flex-direction: column;
    }
    .main .tb_wt_products_system,
    .main .tb_system_category_description
    {
      order: 1;
    }
    .sidebar .tb_wt {
      order: 2;
      margin-top: 30px;
    }
    .sidebar .tb_module_filter_vier {
      order: 0;
      width: 100%;
      margin-bottom: 20px;
    }
  }
}

Add these styles from the Theme CP > Theme Settings > Custom > Custom Stylesheet text field.

Be aware that these will not work on all browsers. Here is the full coverage:

https://caniuse.com/#feat=css-display-contents

BR,
ThemeBurn team

October 26, 2018 at 3:42 pm #65900
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.