Snippets

Dan Bochichio Event Manager PRO Responsive Upgrade

Created by Dan Bochichio
/*put this into Event Manager if needed .../wp-content/plugins/events-manager/includes/css/events_manager.css */
div.em-booking-login {
    margin: 0px 0px 0px 70% !important;
}


/*Single Event Pages Gut*/
.single-event .post-meta,
.single-event .post-header,
.single-event #comments,
.single-event .section-post-about,
.single-event .share_wrapper,
.single-event .post-nav {
	display: none;
}


@media only screen and (min-width: 680px) {
.em-booking-form label {
    width: 47% !important;
    margin-right: 80px;
}

.em-booking-form-details {
    padding: 10px;
    width: 60%;
    float: left;
}

} /*end @media*/

@media only screen and (max-width: 679px) {
div.em-booking-login {
    	clear: left !important;
    	width: 100% !important;
    	margin: 0 !important;
	    border-left: none !important;
}
}

} /*end @media*/


/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
<!-- Default event list format header	-->

<div class="section group">
	<div class="col span_1_of_3">
	<strong>Event Name & Time</strong>
	</div>
	<div class="col span_1_of_3"><strong>Event Location</strong></div>
	<div class="col span_1_of_3"></div>
</div>

<br />


<!-- Default event list format	--->
<div class="section group">
	<div class="col span_1_of_3">
	#_EVENTLINK<br />#_EVENTDATES<br/>#_EVENTTIMES
	</div>
	<div class="col span_1_of_3">
                {has_location}<i>#_LOCATIONNAME, #_LOCATIONTOWN #_LOCATIONSTATE</i>{/has_location}	</div>
	<div class="col span_1_of_3">
#_EVENTIMAGE{250,150}	</div>
</div>

<br />



Comments (0)