My Second Events Layout ( Moving the event title to the top and start date inline )

[Bizz ( John )]

So here is my second layout for the events list page. I just wanted to make more use of the white space surrounding the events past and also if a long title has been added it can span across the top rather than squish up with all the other info. I have also allowed the overflow to show on the narrow column lists so they to can fill the space.

Note: the title only moves above the main section as the one in the narrow columns are fine as they are.

I also changed the spans of the content and start date, day of the week to 100% width so they collapse nicely. Look great on mobiles too.

Well here is the link to the page if you want to take a look: http://bizzssite.ning.com/events2

And here is a screen shot

Mobile View

And here is the code I used to move the title, date and day of the week

First a tiny bit of custom code to move the title, this goes in your SITE & PAGES CUSTOM CODE END OF PAGE BOX

<script>
// Move the events title above the main event
x$(document).ready(function(){
x$(".eventPage-details .entry-title").each(function() {
  x$(this).closest(".media-frame.eventPage-details").prepend(this);
});
});
</script>

Next we need to add a little css. THIS GOES IN YOUR DESIGN STUDIO CUSTOM CSS SECTION

/** New Entry Title Adjustment After Moving It Above the Event Content **/
.eventListPage .eventPage-details > .entry-title{
 margin-bottom:14px;
box-shadow: 0px 5px 5px lightgray;
padding: 4px;
 }

/* Allow the content in the narrow column to fill the space to the left */
  .section-eventBundle .media-frame > .media-body {
    overflow: visible;
}

/* Change the spans of the main content and the date day column to 100% width */
.eventListPage .span3, .eventListPage .span13{ width:100% }

/*Move the start date to the left and make it an inline block */
  .eventListPage .eventListPage-startDate {
    text-align: left;display:inline-block;
}
/* Do the same for the day of the week */
.eventListPage .eventListPage-startDayOfWeek {
    text-align: left;display:inline-block;
}

/** Margin between each of the posts **/
  .eventListPage .entry{ margin-bottom:30px }

[Kos]

Oh please, just hire this man.  lol   (thanks John!)

[Bizz ( John )]

lol Thanks Kos you are a sweetheart :-)

Just added a small image to show the mobile view which I forgot to add in the post earlier.

[Giovanni Cappai]

You rock! (and you know it)

[Bizz ( John )]

Mike Collins posed this question whether the events could be placed side by side in a two column format, so took a look at this and made my events2 page into a two column events list page to test it out, it still needs some extra work but so far it's working out great. It is only in this format above 969px then returns to a single column page.

To see it you may need to refresh the page if you visited it before.