MGCodeSnips

// This CSS will center the products

.c-products-list {
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
}

// Or you could add this to the product class. 

MGCodeSnips

<style type="text/css">/*CONTACT FORM*/
.contact-form {font-size: 12px;}
.contact-form h1 {font-size: 14px; margin: 10px 0px;}
.contact-form p.required {color: red; font-weight: bold; font-size: 11px; margin: 0 0 0 20%}
.contact-form .hr {border-bottom:1px dotted #CCC; height: 1px; margin: 10px 0px; }
.contact-form-row {clear: both; overflow: hidden; margin: 5px;}
.contact-form-row label {font-weight: bold; width: 50%; float: left; line-height: 38px;font-size: 16px;}
.contact-form-row input, .contact-form-row textarea {padding:10px; border: 1px solid #CCC; box-shadow: 0px 0px 5px rgba(0,0,0,.1) inset; float:left; width: 90%; background: #EFEFEF}
.contact-form-row textarea {height: 120px;} 
.contact-form-row .star {color: red;}

MGCodeSnips

	
	<div class="breadcrumb-nav">[ekm:location][/ekm:location]</div><!-- breadcrumb-nav -->
 
	<div class="incategory-description">
		<div class="incategory-description-header">[ekm:categorypagename]categorypageid='[ekm:categoryid][/ekm:categoryid]';[/ekm:categorypagename]</div>
		[ekm:incategorydescription][/ekm:incategorydescription]
	</div>
	
	[ekm:showdata]
	

MGCodeSnips

 
<style>
.item-layout .item-layout-header {text-align: center !important; border-bottom: solid #a8a9ad 2px !important;}
.item-layout.rows .item {width: 50% !important; text-align: center !important; border-top: none !important; display: inline-block !important;}
.item-layout.rows .item-category .item-image {width: 100% !important;}
.item-layout.rows .item-info {padding: 0 0px 0 0px !important;}
</style>
 
<style>
	@media screen and (orientation:portrait) {

MGCodeSnips

<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {

MGCodeSnips

#### documentation                                          ####
#### https://v4-alpha.getbootstrap.com/components/carousel/ ####

<style>
.ekm-edit-button {z-index: 9999;}
#myCarousel > div > div.item.active > div > a {margin: 0 auto!important;}

.carousel{position:relative;}
.carousel-inner{position:relative;overflow:hidden;width:100%;}
.carousel-inner>.item{display:none;position:relative;}

MGCodeSnips

<style>

body  { 
      background: url(images/bg.jpg) no-repeat center center fixed; /* Replace "images/bg.jpg" with your background image URL */
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      }
      

MGCodeSnips

/* Style for tabs. */

<style>
/*** product tabs ***/
#productTabs {
    margin: 20px 0 0;
    position: relative;
}

MGCodeSnips

/* put this in the searchbox ekm tag */
<input type="checkbox" name="ticked" id="ticked" value="Bike"> tick it<br>


/* paste this in the footer */
<script type='text/javascript'>
$(document).ready(function()
{
    $("form").submit(function(e)

MGCodeSnips

<style>

.mobileSlide img{
height:auto!important;
width:auto!important;
}

	@media screen and (orientation:portrait) {
		.mobileSlide{
			display:none;