Single Event Standard Information Pushed to Left

[Grec]

The information that appears in the top portion of a single event (Event, Start, End, Cost, Category, Organizer, …) seems to be getting squeezed to the left 60% of the page. This causes many of these fields to take up multiple lines rather than one. For example, the address field should take up 2 lines but ends up as 6 lines. It looks like that if the full width of the page was used, this wouldn’t happen. Any thoughts on fixing this?

[Barry]

Hi Salvador – you’re correct, by default 2 columns each with a width of 30% are stacked together. You can change this of course – either by changing the style rules or by customizing (overriding) the single event template, or both. Check out:

• Tutorial on Template Overrides
• Themer’s Guide: CSS

Does that help here?

[Grec]

Berry: Thanks. I’m assuming the CSS element I need to change is the columns class. Testing this by adding the following to my theme’s style.css file.

#tribe-events-event-meta .column {
float:left;
width:45%;
padding:0 4% 0 0;
text-align:left;
margin:0;
}

Still waiting for changes to take effect due to caching issues.

Also instead of adding it to the theme’s style.css file it would be nice if there was a separate css file (say one I could put in the event’s folder we need to create to override templates and functions). That way if we update our theme, the changes still remain intact. Has anyone done this? What are the recommended ways to do this?

[Grec]

Just an FYI… The above change to my theme’s style.css file didn’t work. Any ideas?

[Barry]

Can you provide a URL so I can look at your setup?

[Samantha]

I’m having a similar problem with my site. In the Events List View, the page is now being published all to the left side. It worked like a charm, I didn’t install any other plugins or add any new events and today I went to check the calendar before adding an event and I noticed that the content of the calendar is squeezed all the way to the left.
http://www.montclairmetaphysical.com/calendar-3

[Barry]

Hi Samantha! I’d appreciate it if you could create your own thread – otherwise it could quickly become quite confusing here if I have to troubleshoot and talk through possible solutions on two completely different websites, with both of you at different stages of that process.

Thanks! 🙂

[Grec]

I don’t know what Samantha’s looked like before but what she has now is the same look I have for single events.

http://www.montclairmetaphysical.com/event/animal-healing-class/

In my case I have two narrow columns on either side so my central area isn’t as wide as hers. Hence not using the right 1/3 really jams things up and makes the meta area longer.

[Barry]

Hi Salvador!

Also instead of adding it to the theme’s style.css file it would be nice if there was a separate css file (say one I could put in the event’s folder we need to create to override templates and functions)

Sorry I missed that comment first time round. You can indeed do this. Locate and copy the following file:

wp-content/plugins/the-events-calendar/resources/events.css

And place it in the events directory within your theme’s directory, along with any other template overrides. You can find this information if you follow the link I provided earlier (Themer’s Guide: CSS).

The above change to my theme’s style.css file didn’t work. Any ideas?

Can you tell me which file you added your new CSS rule to? I can’t seem to find it in any of your stylesheets.

[Author]

Posts