You are here:Home»KB»Web Design»Design Elements, Styling, Effects and Code»Joomlashine»JSN Modules»Position - Two Embedded Inline Modules with a Large Border
Tuesday, 10 May 2016 17:33

Position - Two Embedded Inline Modules with a Large Border

Written by

I wrote this code so I could set the width of 2 modules via the loadposition plugin rather than rely on bootstap. I developed this to utilise the modules 'Happy Customers' and 'Our Partners' and display them in one module position only.

The code uses the #jsn-content-bottom-over but you can change this for any position.

CSS

/*-- Position - Two Embedded Inline Modules with a Large Border --*/

#jsn-content-bottom-over {
    padding: 10px 0;
}

#jsn-content-bottom-over div.jsn-modulescontainer {
    padding: 10px 0;
}

.pos-cbo { }

.pos-cbo .pos-cbo-happy-customers {
	float: left;
	width: 33.33%;
}

.pos-cbo .pos-cbo-our-partners {
	float: left;
	width: 66.66%;	
}

@media screen and (max-width: 768px) {
	
	.pos-cbo .pos-cbo-happy-customers {
		float: left;
		width: 100%;
	}
	
	/* make partners go under testimonials */
	.pos-cbo .pos-cbo-our-partners {
		clear: both;
		width: 100%;
	}
}

HTML

<div class="pos-cbo">
	<div class="pos-cbo-happy-customers">{l oadmodule mod_custom,Happy Customers}</div>
	<div class="pos-cbo-our-partners">{l oadmodule mod_custom,Our Partners}</div>
</div>

 

Read 998 times Last modified on Tuesday, 10 May 2016 17:50