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

kris25
Visitor
3 0 0

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

Replies 5 (5)

MarinaPetrovic
Shopify Partner
552 124 178

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

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
kris25
Visitor
3 0 0
The url is shop.johnniebrocks.com <> - thanks!

MarinaPetrovic
Shopify Partner
552 124 178

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

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
kris25
Visitor
3 0 0
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
Shopify Partner
552 124 178

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;
}
M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution