Can Events Pro "posts" be created full-width?

[Jennifer]

Hi! I searched the site, but couldn’t find anything on “full-width.”

I use Divi from Elegant themes on a client site. We need our pages, posts, etc., to be enabled to have full-width color/imagery (like this for example: https://blog.graphisoftus.com/queens-wharf-brisbane-webinar-seminar-feb-22nd-23rd).

I tried to build this page in an Pro event post, but it won’t go full-width – it’s forcing a container with margins so the edges of my event listings are empty.

Is there something I can do so that my Event Pro posts allow content/artwork full-width like my example (without the forced container and margins)?

To create that example I linked to above, I had to create an Event in Pro, save it (so it can be included in our calendar of events, which is here: https://blog.graphisoftus.com/events – you can see we have a ton of events, so I need to create our event in Pro so people can find it there).

But because I could not go full-width when designing the Event post, I then had to create a 301 redirect from our Events Pro post/listing so that it would point over to the “page” I created. That’s a lot of extra work.

Please let me know if there’s a way to remove the page container/margins so I can let Divi, my theme, create them as I want them. Thank you! 🙂

[Cliff]

Hi. Thanks for your detailed question.

Here’s a short video explaining why your Events page is not 100% width: https://cl.ly/3m0B0L1g2T1D

The logic in that video should apply to your Single Event pages as well.

Please let me know how this goes for you.

[Jennifer]

Hi! Unfortunately, that’s not quite what I was asking about. If you click into one of the events, that’s where I want full width.

You’re video is looking at the events listing view. If you can click into an actual event and let me know why I cannot go full-width there – that’s what I’m looking to resolve please.

Thanks! 🙂

[Cliff]

The logic in that video should apply to your Single Event pages as well.

Here’s some CSS to help but that only applies to Single Event pages:

`body.single-tribe_events #tribe-events-pg-template {
margin-left: 0;
margin-right: 0;
max-width: 100%;
}

body.single-tribe_events #tribe-events-pg-template .et_pb_row {
max-width: 100%;
}`

Please let me know if you have any follow-up questions on this topic.

[Jennifer]

Ok, thank you – I’ll try it out and let you know how it goes – thanks! 🙂

[Jennifer]

Hi! So I tried it, but the problem is that all of my existing event posts that were designed when the forced margins were in place end up with the content all squished off to the sides.

Is there a way to apply the CSS only to new posts after today? Thanks! 🙂

[Cliff]

I’m sure there’d be a way, but we cannot provide such in-depth customization help, per our Scope of Support / Terms.

If there’s a code snippet you’d like me to put some eyes on or something else I can help you with, please update this ticket or create a new ticket if it’s a separate issue.

Thank you very much for your understanding.

If you need some coding help, you may want to ask your developer or reference our documentation and list of known customizers.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts