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
  • 3290 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
  • 19690 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?



 
  • AVO-Ken
  • Advanced Member
  • Members
  • Join Date: 05-Nov 11
  • 124 posts

Posted 23 May 2019 - 03:15 PM #8

Agreed, default filter handling for mobile devices is terrible.

 

Nice theme Darius. I might use your theme, if I can't find a quick and easy solution. Pricing is good. But I know it will take much time to convert over. For $65 I might just get it to play with on my demo site.

 

Ecom - Tried your code by putting it into CSS mychanges at the bottom and top - no change

 

 

Thanks

Ken



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

Posted 27 May 2019 - 08:12 AM #9

 

Ecom - Tried your code by putting it into CSS mychanges at the bottom and top - no change

 

The mentioned code works with price filter only. Do you have filter by price in your store?


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 руб.