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>