Filter controls hidden by

[David Sharpe]

I’m having a problem with the filter reset button being hidden by the Tribe bar on mobile. I’ve tried a few CSS edits, but they create different problems when the filter options are collapsed.

Any suggestions?

[Geoff B.]

Good evening David and welcome to the Events Calendar Support forum!

Thank you for reaching out to us.

We are sorry to hear about the filter reset button being hidden on mobile.
I would love to help you with this topic.

One approach that seems to fit the issue on your site would be to add the following CSS rule in your mobile Stylesheet (or @media section):

.tribe-bar-disabled {
top: 35px;
}

Let me know if that helps.

Have a great day!

Geoff B.

[David Sharpe]

Thanks, Geoff.

That works fine when the filters are expanded, but when the filters are collapsed the current month title is covered by the bar

[Geoff B.]

Good morning David,

I am sorry that this did not work for you.

If you don’t mind, as a next step. Could you please send me a copy of your WordPress theme / child theme in a .zip file link (via Dropbox or Google Drive) so that I can run some tests on my end ?

Have a good week-end,

Geoff B.

[David Sharpe]

This reply is private.

[Geoff B.]

Good evening David,

Thank you for the files.

That allowed me to run a bunch of tests.

Interestingly enough, even with your child-theme in place, my display is significantly different than yours (as far as element placement goes). In fact, the top: 35px CSS rule I gave out earlier actually makes the display worst on my end 🙁

This is when I figured out that we might be using different stylesheets. It turns out I was right.

Could you remove the previous CSS rule and head over to Events -> Settings -> Display ?
Once there, try switching the stylesheet from Tribe Events Styles to Full Styles and see if you like that better.

Let me know how that goes.

Best regards,
Geoff B.

[David Sharpe]

Changing styles doesn’t fix this for my site. If I change the filter layout to vertical, the filters display correctly on mobile, but I’m not interested in using the vertical layout for desktop views.

Thanks for your help, Geoff. This seems like a bug so maybe it will be corrected in a future update.

[Geoff B.]

Hello David,

Thank you for writing back.

Actually, I might have a solution for you. Could you try the following CSS rule instead of the previous one ?

@media only screen and (max-width: 767px) {
.tribe-filters-open #tribe_events_filters_wrapper, .tribe-filters-open #tribe_events_filters_wrapper.tribe-events-filters-horizontal, .tribe-filters-open #tribe_events_filters_wrapper.tribe-events-filters-vertical {
max-height: 384px;
}
}

Let me know how that goes.

Best regards,
Geoff B.

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts