Filter Bar expands to fill page and pushes calendar below it

[Dave]

The filter bar expands to fill the page width at about 780px and it pushes the calendar below it. Then when I make my screen wider it continues to fill the width of the page. How do I get it to stay to the left of the calendar as the page gets wider than 780px? I thought maybe i just need to clear the browser cache and refresh the page but it doesn’t help. I did find that once the page got wider if I clicked Show Filters link that it would go back to being narrow and to the left of the calendar.

[Geoff B.]

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

Thank you for reaching out to us.

We are sorry to that you had to deal with one of our recent bugs. We apologize for the inconvenience.

I would love to help you with this topic.

We already have a fix under way which should make it in our next release.
You will be contacted when the fix is released.

In the meantime, adding the following CSS to your style.css file or Custom CSS box should fix things.

.tribe-events-filters-vertical {
float: left;
width: 25%;
}

Let me know how that goes.

Best regards,
Geoff B.

[Dave]

I tried that but it doesn’t automatically float left as the screen gets wider. Any other ideas? If it is helpful to see it the page is here: http://cyclingwesterncolorado.com/events/

Thanks!

[George]

Hello!

I wanted to inform you that we’ve just published a series of updates to our products that fixes a number of issues.

We’ve fixed the Filter Bar layout issues reported here.

Learn more about this release—version 4.3.3—in the official release notes here → https://theeventscalendar.com/maintenance-release-events-calendar-4-3-3-event-tickets-4-3-3-premium-plugins/

Thanks for your patience while we fixed this!
George

[Dave]

I installed the filter bar update but it hasn’t fixed the issue for me. Can you look into this further? http://cyclingwesterncolorado.com/events/

Also, now when the screen hits 767 and below the filter bar now runs over the calendar.

Thanks!

[Geoff B.]

Good evening Kristina,

I am sorry to see that this did not go away completely on your end.

I would like to dig deeper into this with you.

As a first troubleshooting step, could you please provide us with your latest system information in a private reply using the instructions found in the following link?

https://theeventscalendar.com/knowledgebase/sharing-sys-info/

Secondly, could you please send me a copy of the latest version of your WordPress theme / child theme via a link to a .zip file link (stored Dropbox or Google Drive) so that I can run some tests on my end ? I recommend a private reply for that purpose.

Please ensure you are using the latest files as found on your actual website.
This way I will get access to any updates or customizations you might have made.

In the meantime, as a workaround, you might want to change the default filter state to “closed”.
It’s not ideal, but it should buy you some time.

Hang in there as we investigate this further.

Best regards,

Geoff B.

[Dave]

This reply is private.

[Geoff B.]

Good evening Kristina,

Thank you for the files.

I also ran some additional testing on your website and for some reason, other CSS rules are interfering.

So here are a couple of CSS rules to fix that:

Add  !important arguments to the first CSS

.tribe-events-filters-vertical {
float: left !important;
width: 25% !important;
}

.tribe-filters-closed #tribe-events-content {
clear: none !important;
float: left !important;
width: 70% !important;
}

Let me know if that helps.

Have a great day!

Geoff B.

[Dave]

I added the above css and it helped! I am trying to get the calendar to go below the filter bar at media query 767 and smaller but nothing I try is working.

Ideas?

Thanks!

[Geoff B.]

Good evening Kristina,

I am glad the CSS helped.

Here are a couple of additional rules that I believe will help achieving the result you are looking for:

@media only screen and (max-width: 767px) {
.tribe-mobile #tribe_events_filters_wrapper.tribe-events-filters-horizontal, .tribe-mobile #tribe_events_filters_wrapper.tribe-events-filters-vertical {
display: inline-block !important;
clear: both !important;
height: auto !important;
}

#tribe-events-content {
z-index: 4 !important;
}
}

Let me know if that helps.

Have a great day!

Geoff B.

[Dave]

That fixed it! Thank you for your help!

[Geoff B.]

Hey Kristina!

I am super stoked this helped you fix the issue.

You are welcome back in our support forums any time 🙂

For now, I am going to close this thread.

Have a great week!

Geoff B.

[Author]

Posts