Why is the sort filter in my RIDE theme store transparent?

Store Design
1

Hello, I have a shopify store using the RIDE theme. On windows computers the dropdown for sorting is white with white text. The theme is made by shopify so I am confused why it would show up like this.

unknown.png
unknown.png620×482 106 KB

2

Hi @kris25 , please share your url so I can take a look, since sorting is not transparent on the original ride theme.

Screenshot 2022-09-23 at 08.35.47.png
Screenshot 2022-09-23 at 08.35.47.png305×288 32.1 KB

3

The url is shop.johnniebrocks.com <> - thanks!

4

Hi @kris25 , I’ve just checked your store on safari and chrome - it’s not transparent. Which browser are you using?

Screenshot 2022-09-23 at 17.14.51.png
Screenshot 2022-09-23 at 17.14.51.png407×340 113 KB

5

On Macs it shows up properly because Mac has their own styles for sorting like that. On a windows computer it shows up white on white like my screenshot.

6

I see. Go to edit code > assets > component-facets.css and find this element:

.facet-filters__sort {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    font-size: 1.4rem;
    height: auto;
    line-height: calc(1 + .5 / var(--font-body-scale));
    margin: 0;
    padding-left: 0;
    padding-right: 1.75rem;
}

Replace it with:

.facet-filters__sort {
    border: 0;
    border-radius: 0;
    font-size: 1.4rem;
    height: auto;
    line-height: calc(1 + .5 / var(--font-body-scale));
    margin: 0;
    padding-left: 0;
    padding-right: 1.75rem;
}
1 Like