Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Responsive Filter Menu Rate Topic   - - - - -

 
  • Paul John
  • Member
  • Members
  • Join Date: 19-Apr 12
  • 47 posts

Posted 26 August 2014 - 08:05 AM #1

I feel the filter menu should collapse the same way the main menu does in smaller screen sizes.
With a left, filter sidebar, the filters take up way too much space.

Anybody know how to achieve this?

Attached Thumbnails

  • Electronics 2014-08-26 10-01-03.png

4.2.1
4.2.2
4.2.3

 

Posted 26 August 2014 - 10:32 AM #2

Hello Paul

There are 3 variants:

1.
Hide filter elements for small screens by default.
For example, use custom styles:
@media (max-width: 767px) {
.ty-price-slider,
.ty-product-filters {
display: none;
}
}
See screenshot in Attached Thumbnails.

2.
Move the filters to the right column. Then filters will be below the central content on small screens.

3.
You can try to set the grid in the block manager: the column`s grid and grid of the main content.
But, I do not advise you to change the size of the grid in the main theme styles.
Typically, developers are carefully calibrate grid sizes.

Attached Thumbnails

  • column_style.png

e-Commerce Templates Websiteskin - http://websiteskin.com
 


 
  • Paul John
  • Member
  • Members
  • Join Date: 19-Apr 12
  • 47 posts

Posted 26 August 2014 - 11:42 AM #3

Thanks Katrin,

option 1 maybe an acceptable workaround but I think I will try the more elegant way and add some bootstrap classes to get a proper collapsing menu.
4.2.1
4.2.2
4.2.3

 

Posted 12 June 2018 - 01:53 PM #4

Does anyone already have a good solution for having the filters folded down on a mobile?



 
  • Darius
  • Douchebag
  • Members
  • Join Date: 20-Apr 08
  • 3221 posts

Posted 12 June 2018 - 02:01 PM #5

Yep, this theme

http://demo.themehil...nics/computers/



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18468 posts

Posted 13 June 2018 - 06:16 AM #6

Does anyone already have a good solution for having the filters folded down on a mobile?

 

Try to add the following code to the CSS section of the Theme editor

@media screen and (max-width: 480px) {
    .ty-product-filters, .ty-price-slider {
        display: none;
    }
}

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 

Posted 02 July 2018 - 10:11 AM #7

making the entire block invisible on mobile is not a really good solution. Does anyone know a good fix for mobile? So that you can collapse the filters?