Mobile Event Detail Page Layouts

Code:

  
<div class="imod_eventDetails">
  <h2 class="imod_eventName">[[Event Name]]</h2>
  <div class="imod_eventButtons">[[Registration Button]] [[Attendees List Button]]</div>
  <div class="imod_eventDescription">[[Event Description]]</div>
  <div class="imod_eventContact">
    <h3 class="imod_eventLabel">Contact Information</h3>
    <div class="imod_eventContactPrimary">
      <h4>Primary Contact</h4>
      <div>[[Contact1 First Name]] [[Contact1 Last Name]]</div>
      <div>[[Contact1 Street1]]</div>
      <div>[[Contact1 Street2]]</div>
      <div>[[Contact1 City]]<span id="contactseparator1">, </span>[[Contact1 State]] 
      [[Contact1 Postal Code]]</div>
      <div>[[Contact1 Phone]]</div>
      <div>[[Contact1 Fax]]</div>
      <div>[[Contact1 Email]]</div>
    </div>
    <div class="imod_eventContactSecondary">
      <h4>Secondary Contact</h4>
      <div>[[Contact2 First Name]] [[Contact2 Last Name]]</div>
      <div>[[Contact2 Street1]]</div>
      <div>[[Contact2 Street2]]</div>
      <div>[[Contact2 City]]<span id="contactseparator2">, </span>[[Contact2 State]] 
      [[Contact2 Postal Code]]</div>
      <div>[[Contact2 Phone]]</div>
      <div>[[Contact2 Fax]]</div>
      <div>[[Contact2 Email]]</div>
    </div>
  </div>
  <div class="imod_eventDateLocation">
    <h3 class="imod_eventLabel">Date &amp; Location</h3>
    <div class="imod_eventDate">[[Date Range]]</div>
    <div class="imod_eventLocation">
      <span class="locationLabel">Location:</span> [[Location Name]]
      <div class="imod_eventLocationDirections">[[Location Directions]]</div>
    </div>
  </div>
  <div class="imod_eventActivities">[[Activity List]]</div>
</div>
<div style="clear: both;" originalstyle="clear: both;"></div>

NOTES: This layout looks best with a map embedded in the Location editor. Anything placed in the Location editor will display in the gray window. If using an image in the Event Description editor, do not exceed ~600px wide.

Code:

 
 
  
<div class="imod_eventDetails imod_eventDetails_layout1">
<div class="imod_eventDetails_layout1--box">
<div class="imod_eventDetails_layout1--dateTimeLoc">
<div class="imod_eventDetails_layout1--dateTime">
<h2 class="ev-heading">Date:</h2>
<span class="date">[[Event Date Only Range DOW]]</span>
<span class="time">[[Event Time Range]]</span>
</div>
<div class="imod_eventDetails_layout1--location">
<h2 class="ev-heading">Location:</h2>
<div class="location">[[Location Name]]</div>
</div>
</div>
<div class="imod_eventDetails_layout1--directions">
<div class="directions">[[Location Directions]]</div>
</div>
<div class="imod_eventDetails_layout1--buttons">
[[Registration Button]] [[Attendees List Button]]
</div>
</div>
<div class="imod_eventDetails_layout1--description">[[Event Description]]</div>
<div class="imod_eventDetails_layout1--contact">
<h2 class="imod_eventLabel">Contact Information</h2>
<div class="imod_eventContactPrimary">
<div>[[Contact1 First Name]] [[Contact1 Last Name]]</div>
<div>[[Contact1 Phone]]</div>
<div>[[Contact1 Email]]</div>
</div>
</div>
</div>
<div style="clear: both;" originalstyle="clear: both;"></div>

NOTES: This layout looks best with a ~500px wide image in the Event Description Editor, centered.

Code:

 
 
  
<div class="imod_eventDetails imod_eventDetails_layout2">
 <div class="imod_eventDetails_layout2--mobile">
 <div class="imod_eventDetails_layout2--date--mobile">
 <span class="date">[[Event Date Only Range DOW]]</span>
 <span class="time">[[Event Time Range]]</span>
 </div>
 <div class="imod_eventDetails_layout2--buttons--mobile">
 [[Registration Button]] [[Attendees List Button]]
 </div>
 </div>
 <div class="imod_eventDetails_layout2--leftCol">
 <div class="imod_eventDetails_layout2--description">[[Event Description]]</div>
 </div>
 <div class="imod_eventDetails_layout2--rightCol">
 <div class="imod_eventDetails_layout2--buttons">
 [[Registration Button]] [[Attendees List Button]]
 </div>
 <div class="imod_eventDetails_layout2--dateTimeLoc">
 <div class="imod_eventDetails_layout2--dateTime">
 <h2 class="ev-heading">Date:</h2>
 <span class="date">[[Event Date Only Range DOW]]</span>
 <span class="time">[[Event Time Range]]</span>
 </div>
 <div class="imod_eventDetails_layout2--location">
 <h2 class="ev-heading">Location:</h2>
 <div class="location">[[Location Name]]</div>
 <div class="directions">[[Location Directions]]</div>
 </div>
 <div class="imod_eventDetails_layout2--contact">
 <h2 class="ev-heading">Contact Information</h2>
 <div class="imod_eventContactPrimary">
 <div>[[Contact1 First Name]] [[Contact1 Last Name]]</div>
 <div>[[Contact1 Phone]]</div>
 <div>[[Contact1 Email]]</div>
 </div>
 </div>
 </div>
 </div>
</div> 
<div style="clear: both;" originalstyle="clear: both;"></div>

NOTES: This layout has a color block at the bottom of the right column. The code can be changed by adjusting the RGB code in the HTML. This layout looks best with a ~500px wide image in the Event Description Editor, centered.

Code:

 
  
  
<div class="imod_eventDetails imod_eventDetails_layout3">
 <div class="imod_eventDetails_layout3--buttons">[[Registration Button]] [[Attendees List Button]]</div>
 <hr>
 <div class="imod_eventDetails_layout3--inner">
 <aside class="imod_eventDetails_layout3--details" style="border-color: rgb(0, 98, 177);">
 <h2 class="sr-only">Event Details</h2>
 <ul>
 <li>
 <h3>Date</h3>
 <div class="imod_eventDetails_layout3--detail">[[Event Date Only Range DOW]]</div>
 </li>
 <li>
 <h3>Time</h3>
 <div class="imod_eventDetails_layout3--detail">[[Event Time Range]]</div>
 </li>
 <li>
 <h3>location</h3>
 <div class="imod_eventDetails_layout3--detail">[[Location Name]]</div>
 </li>
 <li>
 <h3>Questions?</h3>
 <div class="imod_eventDetails_layout3--detail">
 <span>[[Contact1 First Name]] [[Contact1 Last Name]]</span>
 <span>[[Contact1 Phone]]</span>
 <span>[[Contact1 Email]]</span>
 </div>
 </li>
 </ul>
 </aside>
 <div class="imod_eventDetails_layout3--description">[[Event Description]]</div>
 <hr>
 <div class="imod_eventDetails_layout3--directions">
 <h2>Directions</h2>
 [[Location Directions]]
 </div>
 </div>
</div>