Venture Theme - Filter By and Sort By fields

Store Design
1

Hi All!

Please can someone assist.

I have the Venture theme and on the collection pages I would like to make the “FILTER BY” and “SORT BY” fields wider as currently some of the text is cut off (see screenshot below).

https://electricrideco.com/collections/electric-scooters/all-terrain-e-scooter?sort_by=price-ascending

Thanks in advance!

Screen Shot 2022-06-12 at 11.30.06 AM.png
Screen Shot 2022-06-12 at 11.30.06 AM.png1279×682 157 KB

2

Hi,

Please go to Actions > Edit code > Asset > theme.scss.css

Find (Ctl + F) .collection-sort

Delete max-width: 150px;

It should be as following.

.collection-sort {
 display: inline-block;
 text-align: left;
}

or (comment out)

.collection-sort {
  display: inline-block;
  text-align: left;
  /* max-width: 150px; */
}
3

Hello @guyv ,

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.collection-sort {
    max-width: 100% !important;
}

Thanks

4

@Guleria

@DavidEKim

Thanks a lot for your help.

I’ve used the code:

.collection-sort {
    max-width: 200px !important;
}

I’ve noticed one more issue which is at a certain screen size the FILTER BY and SORT BY filters stack on top of each other and are not aligned (see screenshot below). Can you assist with code to align these fields?

Thanks!

Screen Shot 2022-06-12 at 2.02.11 PM.png
Screen Shot 2022-06-12 at 2.02.11 PM.png751×736 83.9 KB

5

Your theme’s break point for mobile is 749px but there is no control in between 750px to 900px.

Please add the code below to your theme.scss.css.

@media only screen and (min-width: 750px) and (max-width: 900px) {
  .collection-sort {
    width: 200px!important;
    display: inline-flex;
    flex-direction: column;
    align-content: flex-start;
  }
}

Thanks.

6

@DavidEKim

Perfect! Thanks a lot!