Home Forums Event Espresso Premium Make Event Page Full Width with css

Make Event Page Full Width with css

Posted: August 8, 2018 at 5:17 am


August 8, 2018 at 5:17 am

I’ve just removed an old template for the single event page as I want to keep our layout as close to ‘out of the box EE’ as much as possible as we are now using more of your features.

However, my programmer is currently in hospitable so I need to make some simple changes myself (eek!), To start with, I want to make the single event page full width.

Could you give me some code for the .css to achieve that if possible? I’d rather not have to create a new template if possible as that is a bit over my ability without having my hand held!


  • Support Staff

August 8, 2018 at 6:11 am

Hi there,

Looking at the events on your site they appear to already show full width?

Is there a specific page you are referring to?


August 8, 2018 at 6:17 am

I had to turn it back to our original template as we have people on the site!

Look now.

I also noticed that the section headings (event description, dates, ticket selector) are missing?


  • Support Staff

August 8, 2018 at 7:15 am


Section headings are not actually included with the defaults. If you had section headings before, those may have been added to the old template. The old template that you’ve just removed.

You can make the event page full width with CSS by adding the following to your custom stylesheet/customizer additional CSS panel:

.single-espresso_events .post, 
.single-espresso_events #sidebar {
float: none;
width: auto;
.single-espresso_events #sidebar {
max-width: 560px;
margin: 0 auto;


August 8, 2018 at 7:21 am

oh exciting, that worked. Thanks!

We had a completely different page template before so this is really bringing us back to EE core. I saw those headings on may of your example case studies – how would I add them?


  • Support Staff

August 8, 2018 at 7:25 am

Can you share a link from one of the examples where you saw those? I’m not clear on exactly what you mean.


August 8, 2018 at 7:29 am

Sure thing, it’s on your demo here:

The layout of all of the events and the elements of the page are really nicely done here.


  • Support Staff

August 8, 2018 at 7:38 am

I don’t see any section headings above the event description, dates, or ticket selector there.


August 8, 2018 at 7:42 am

Oh you are correct! I don’t know where I saw them then but they looked good and I assumed it was a core element!


The support post ‘Make Event Page Full Width with css’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3

Documentation for Event Espresso 4

Status: closed

Updated by  mpurse 6 months, 1 week ago ago

Topic Tags


This topic is:
Do NOT follow this link or you will be banned from the site!