Hide Meta Description in Mobile?

[Jordan Polon]

Is there an easy way to hide the meta description on the right side of the event list when viewing on a mobile device?

[Jordan Polon]

I should add more specifically: Is there a way to have the event meta (on the right) drop below the event description? Or just to eliminate event meta it on a mobile by making the width of the description 100%?

[Barry]

I’m sure it’s possible. If you’re happy with the concept of simply making the description wider then you can override events.css in your theme. Please see:

https://theeventscalendar.com/support/documentation/events-calendar-themers-guide/

And

https://theeventscalendar.com/what-are-template-overrides-and-how-do-i-do-them/

[Jordan Polon]

Thanks Barry. I was able to achieve what I wanted to in the single event view by adding this to my css. http://pastebin.com/rW7AWRZB (It’s perfect on mobile, the meta displays as a single column: http://www.hartford.com/event/winterfest-ice-skating/2013-01-21/ ). However, I can not get anything like this to work on the event calendar list view on mobile. http://www.hartford.com/events

Any ideas? Thanks so much; you guys are the best.

[Leah]

Hey Tara, thanks for the update. Barry is not working today, but I’ll have him get in touch with you on Monday.
Cheers,
Leah

[Barry]

Well, looking at the upcoming events list we’ve got the description inside div.tribe-events-event-entry and this is floated left and has a width of 60%. We’ve also got div.tribe-events-event-list-meta and that is floated right with a width of 30%.

Using a media query similar to the one you posted, can you remove the floats and set the widths to 100% or whatever looks good to you?

[Jordan Polon]

That did work. Thank you. Is there a way to get the start/venue/adress to appear before the event description?

Thanks!

[Barry]

Looking at this event it seems it already does – unless I’m misunderstanding you?

It’s definitely possible to re-order things though – have you checked out the themer’s guide and template overrides tutorial I linked to earlier?

[Jordan Polon]

I have checked it out, but to no avail. The event you linked to display perfectly; I’m referring to the list view shown here: http://hartford.com/events , on mobile, of course.

I appreciate all of your help.

[Barry]

Well, if you view the source you can see that div.tribe-events-event-list-meta (which contains those fields) is currently printed out after the description.

So one approach could be to modify the template so it is rendered between the event title and before the description then, using media queries, move it into its regular position for non-mobile viewers or just leave it in situ for mobile users.

[Barry]

It’s been a while so I will now close this thread 🙂

[Author]

Posts