Filter Bar Isn't Working Properly on Mobile

[Shaun]

Good Afternoon,

I’m having an issue on mobile devices where the filter bar will not display properly. It is covering the title, overlapping with the standard TEC search bar, and most importantly, not displaying the top filter option, which is vital to users finding the correct events on our site. This issue is taking place on both my mobile phone, which is a Samsung S7, as well as on my PC, both in Safari and Firefox.

[Hunter]

Hey Shaun,

Welcome back! I hope you had a great holiday season and your New Year is off to a great start. Sorry to see you’re having issues with the Filter Bar. Before we proceed, can you please review our Testing for conflicts guide and reply back with your findings? Please include your System Information as a private reply.

Please note we are fairly limited when it comes to conflicts with custom themes and plugins by other authors. For more info, please review our What support is provided for license holders? Knowledgebase article.

Let me know what you find out and take care 🙂

[Shaun]

This reply is private.

[Hunter]

Hello,

Thank you for the update and sharing your System Information with me. I’m not seeing anything out of the ordinary. I’ve worked with both BJ Lazy Load and W3 Total Cache and would personally start there.

I’m not having any display issues with the Filter Bar on my test site and there aren’t any logged bugs resembling your issue. It might be best you set up a fresh WordPress installation where you can fully troubleshoot the issue. Make sure you have only the default WordPress theme and The Events Calendar installed and activated on the test site. Please review our Using One License for Live and Dev Sites for more information.

Please make sure WP_DEBUG and WP_DEBUG_LOG are enabled on your site’s wp-config.php file. Any errors will display at the top of your page as you try to reproduce the conflict. Note what you find and please include it in your reply.

This Customizing WordPress #2 – Using Chrome Developers Tools YouTube video is a great visual example on how to use your browser’s ‘Inspect’ tool to make changes using CSS.

Sorry I can’t do more in this scenario and best of luck resolving the conflict. Thanks again and have a good evening 🙂

[Shaun]

This bit of css fixed the most major issue (Couldn’t see entire filter bar)

.tribe-events-filters-vertical .tribe-events-filters-content {
padding: 0;
margin-top: 100px;
}

It still isn’t pretty, but it works for the most part.

[Hunter]

Thank you for sharing your solution with me 🙂

I’ll close this thread out but please feel free to create a new one if you have any more questions. Have a great weekend!

[Author]

Posts