Mobile Event Detail Page Layouts

Print Friendly and PDF Follow

In order to make your Event Detail Page mobile friendly, you can copy/paste the HTML below into the Detail Page content editor and then make adjustments to the items you want/need.

 Layout Option #1:
screenshot_-_Default_Layout.png

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>

Layout Option #2:

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. 
screenshot_-_Layout_1.png

Code:

&nbsp;
&nbsp;
&nbsp;&nbsp;
<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>

 

Layout Option #3:

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

screenshot_-_Layout_2.png

Code:

&nbsp;
&nbsp;
&nbsp;&nbsp;
<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>

 

Layout Option #4:

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.

screenshot_-_Layout_3.png

Code:

&nbsp;
&nbsp;
&nbsp;&nbsp;
<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>

 

 

Have more questions? Submit a request