Display the filter on different sizes of screens

ThemeBurn SupportForumsOpenCart ThemesBurnEngineDisplay the filter on different sizes of screens

This topic has been marked as 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) {
    body[class*="tb_page_product_"]:not(.tb_page_product_product) #content > .row,
    body[class*="tb_page_product_"]:not(.tb_page_product_product) .main,
    body[class*="tb_page_product_"]:not(.tb_page_product_product) .main > .row-wrap,
    body[class*="tb_page_product_"]:not(.tb_page_product_product) .main > .row-wrap > .row,
    body[class*="tb_page_product_"]:not(.tb_page_product_product) .main > .row-wrap > .row > .col,
    body[class*="tb_page_product_"]:not(.tb_page_product_product) .sidebar,
    body[class*="tb_page_product_"]:not(.tb_page_product_product) .sidebar > .row-wrap,
    body[class*="tb_page_product_"]:not(.tb_page_product_product) .sidebar > .row-wrap > .row,
    body[class*="tb_page_product_"]:not(.tb_page_product_product) .sidebar > .row-wrap > .row > .col
    {
      display: contents !important;
    }
    body[class*="tb_page_product_"]:not(.tb_page_product_product) #content {
      display: flex !important;
      flex-direction: column;
    }
    body[class*="tb_page_product_"]:not(.tb_page_product_product) .main .tb_wt_products_system,
    body[class*="tb_page_product_"]:not(.tb_page_product_product) .main .tb_system_category_description
    {
      order: 1;
    }
    body[class*="tb_page_product_"]:not(.tb_page_product_product) .sidebar .tb_wt {
      order: 2;
      margin-top: 30px;
    }
    body[class*="tb_page_product_"]:not(.tb_page_product_product) .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

Thank you very much!!!

 pobo3
November 23, 2018 at 6:53 pm #66251

Glad we’ve helped!

BR,
ThemeBurn team

November 27, 2018 at 11:49 am #66298

Everything is not so good with this code.
It looks good in the category, but the mobile view and product card are crashed.

Is it possible to fix it?

  • This reply was modified 1969 days ago by  pobo3.
 pobo3
December 4, 2018 at 12:55 pm #66363

Hi,

We’ve improved the code a bit and now it affects only category, promotion and manufacturers pages.

BR,
ThemeBurn team

December 6, 2018 at 11:20 am #66412

Thanks a lot

 pobo3
December 8, 2018 at 10:20 am #66466

Glad we’ve helped, mate!

BR,
ThemeBurn team

December 21, 2018 at 11:49 am #66580
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.