Detailed Event Page Cutting Off Title

[dleimonitis]

Hi,

I seem to be experiencing a display/formatting issue when viewing events in the detail view. For example, when you view :http://techkids.com.au/event/2015-term-2-after-school-workshop-greythorn-primary-school/ or http://techkids.com.au/event/brickmation-level-2-intermediate/ the title or top page of the page text are cut off/missing.

How can I resolve this?

Thanks!

[George]

Hey Dimitri,

Sorry you’re having some issues here! I’m curious about what your “Events Template” settings are – you can find this option in Events > Settings > Display in your admin, as seen in this screenshot → https://cloudup.com/cYWYN3QX5FH

What do you currently have selected? If you change this template to any other template and save your settings, then check on this issue again, does any template work better here than others?

The problems with layout here are originating from your theme, so changing templates may get your theme styles to apply differently here and make things look better.

If you don’t find that any specific Events Template works better than others here, then revert to the original template you had selected and let us know – we can take a closer look, and while this layout problem is one from your theme and we can’t fully support it, we can definitely at least offer some general advice and hopefully some specific CSS to help you get started on correcting the layout here.

Thanks!
George

[dleimonitis]

Hi George,

Thanks for your prompt response! I’ve tested all the available templates however the issue is still occurring. Can you provide any general or CSS specific advice?

Thanks,
Dimitri

[George]

Hey Dimitri,

Hm, sorry you didn’t have any luck there.

There are two general things I can recommend here – first, try finding a single.php file in your theme, then duplicate it and rename this duplicate single-tribe_events.php. If you save that file, see if anything changes at all. If not, you can alternatively copy the code from single.php and then use that to make a custom version of the single-event.php template file for The Events Calendar. This alternative is a bit more code-heavy, and you’d have to ensure that you create this file according to our Themer’s Guide here, but it may help →

The second option I can think of would be to just go throughout various instance of Event listings on your site and manually write CSS to correct for some of the layout issues. For example, on the page you originally linked to, some CSS like the following would technically help to make the events title at least appear on the page:

body.single #tribe-events-pg-template {
    margin-top: 11em;
}

That “11em” value is somewhat arbitrary, but it worked decently for me when I tested it on your site → https://cloudup.com/c0RoOfB5ubJ

Note, however, that this would value would need to be adjusted for your site’s mobile views and such as the browser size changes. For help with that, you can get started with a resource like this one that describes ways to handle writing different CSS for different browser or device widths → https://css-tricks.com/css-media-queries/. Your theme may have CSS like media queries that you can copy and use for your customizations, too.

If you have a theme developer or anyone who helped customize the site for you, see if they can help – be sure to keep backups of all custom code you write, too.

I hope the information here helps Dimitri!

Cheers,
George

[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