Sort Filter is Transparent

[kris25]

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. 

[MarinaPetrovic]

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

[kris25]

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

[MarinaPetrovic]

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

[kris25]

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.

[MarinaPetrovic]

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;
}