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>