mobile view issue in collection page

Hello everyone. i have built a store. I have used search and discovery app for filtering. When i see it in desktop view its working good , but when we see it in mobile view, the filters are overlapping the products. i mean they both are overlapping ach other. i am attaching a screen for your reference. kindly help me to solve this issue. thank you.

here is my store preview link : https://iv47v387lhfd765t-67593830638.shopifypreview.com

Hello @momsabhiruchi ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code at the bottom:

.facets-container.scroll-trigger.animate--fade-in {
    z-index: 999 !important;
}

Regards
Guleria

thank you so much a very quick solution. could you please help me with one more issue. the sort button in mobie view is taking black color background. how to resolve it.

Hi Guleria, I have used your code to solve the filter view issue in mobile, but unfortunately, i am getting same type of issue in desktop after adding it. here in desktop, the checkboxes are overlapping the menu bar when scrolled up. can you please help me to resolve it. i am attaching the sreenshot for reference . here is link to the preview of my store. https://iv47v387lhfd765t-67593830638.shopifypreview.com

Replace the previous css with this one

@media screen and (max-width: 750px) {
 .facets-container.scroll-trigger.animate--fade-in {
    z-index: 999 !important;
}
}
1 Like

perfect. thank you so much :folded_hands:

can you please hellp me this aswell. i am trying it with all the ways, but not getting result. sort by drop down has black background. again it is in the mobile view. my store preview link : https://iv47v387lhfd765t-67593830638.shopifypreview.com ,

use this css

select#SortBy-mobile {
    background-color: transparent !important;
}
1 Like

thank you so much. it perfectly resolved the issue. thanks a lot once again