This live article has been redirected to the V2 version. Please do not unpublish the article.
Default breakpoints in our app
By default, the breakpoints in our app was set to 767px (px = pixel)
Filter on the mobile (screen size <= 767px) |
|
| Filter on the desktop (screen size > 767px) |
Verticle layout | Horizontal layout |
|
|
How to change the breakpoint for displaying the filter?
To change the breakpoint for displaying the filter, you need to update two following files:
assets/bc-sf-filter.js
assets/bc-sf-filter.scss.liquid
1 Update the file: assets/bc-sf-filter.js
* Change the breakpoint from 767(pixel) to NUMBER(pixel) - (NUMBER is a optional screen size)
Open the "assets/bc-sf-filter.js" file.
Add/Change the following code:
breakpointMobile: '767'
to
breakpointMobile: 'NUMBER'
For example, change 767px to 1024px (See below screenshot)
Save this file to apply all changes.
2 Update the file: assets/bc-sf-filter.scss.liquid
* Change the breakpoint from 767(pixel) to NUMBER(pixel) - (NUMBER is a optional screen size)
Open the assets/bc-sf-filter.scss.liquid file.
Find and Change the following variable:
$breakpointMobile: 767px;
to
$breakpointMobile: NUMBERpx;
For example, change 767px to 1024px (See below screenshot)
Search the following code in the content of this file:
@media screen and (max-width: 767px)
If the above code exists on this file, replace it to:
@media screen and (max-width: $breakpointMobile)
Save the file to apply all changes.
Feel free to reach out to our dedicated support team via chat if you have any questions or require additional assistance.