Only 2 filters show up on mobile phones

[Michael]

Hello.
We have setup the Filter bar on
resident.com/events/
However on mobile phones only 2 of the filters show up, as you can see at
mobiletest.me/iphone_5_emulator/?u=http://resident.com/events/
What is causing this and how can we fix it?
Thank you

[Geoff B.]

Good evening Michael and welcome back!

Thank you for reaching out to us.

We are sorry to hear about the incomplete list of filters on mobile.
I would love to help you with this topic.

What is going on is that on your theme, the missing filters are actually hidden behind the logo.

You will have to use some CSS rule to fix that. Here’s an example of what that might look like

@media only screen and (max-width: 767px) {
.tribe_events_filters_wrapper {
top: 168px;
position: relative;
}
}

Let me know if that helps.

Have a great day!

Geoff B.

[Michael]

Thank you.
I’d like you to clarify what the link
@media
is about. I think you might have made a mistake.

[Geoff B.]

Good evening Michael,

Actually, I did not make a mistake, the @media CSS queries are meant to take care of mobile versions only.

In the CSS rule I provided, for example, it means that any device that has a screen of 767px and less will get that rule.

You can read more about responsive design CSS here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

That being said, I’m sure you could tackle the issue another way (for example by not making the logo a fixed size or by preventing it from overlapping).

Let me know if that helps.

Have a great day!

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