Is there a way to create this layout that's attached in the image using repeatable regions so the 2nd row has a larger first column width and the third row has a larger middle column on the front end. I'm using bootstrap so makes it bit easier with the column width
Below is the current non couchcms code
Below is the current non couchcms code
- Code: Select all
<section class="gallery-section">
<div class="auto-container">
<div class="video-gallery">
<img src="https://www.beechwoodsolutions.co.uk/sites/ronby-security/two/cms/uploads/image/home-page-images/various-security-systems.jpg" alt="" />
<div class="overlay-box">
<div class="overlay-inner">
<a href="#" class="lightbox-image video-box"></a>
<h3><a href="#">Get first class service & high quality security solutions from Ronby Security Ltd</a></h3>
<div class="text">
<p>With the latest wired and wireless technology, why not <a href="https://www.beechwoodsolutions.co.uk/sites/ronby-security/two/contact.php">contact us</a> for a tailored package to your requirements.</p> </div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="gallery-block col-lg-4 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="assets/images/gallery/roller-shutters.jpg" alt="" />
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<h4><a href="roller-shutters-steel-doors.php">Roller Shutters & Steel Doors</a></h4>
<div class="category">Commercial</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gallery-block col-lg-4 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="assets/images/gallery/roller-garage-doors.jpg" alt="" />
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<h4><a href="remote-roller-garage-doors.php">Remote Roller Garage Doors</a></h4>
<div class="category">Commercial & Domestic</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gallery-block col-lg-4 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="assets/images/gallery/automatic-doors.jpg" alt="" />
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<h4><a href="automatic-doors.php">Automatic Doors</a></h4>
<div class="category">Commercial</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gallery-block col-lg-8 col-md-12 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="assets/images/gallery/gates-barriers.jpg" alt="" />
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<h4><a href="gates-barriers.php">Gates & Barriers</a></h4>
<div class="category">Commercial</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gallery-block col-lg-4 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="assets/images/gallery/access-control.jpg" alt="" />
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<h4><a href="access-control.php">Access Control</a></h4>
<div class="category">Commercial</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gallery-block col-lg-3 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="assets/images/gallery/intercoms.jpg" alt="" />
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<h4><a href="intercoms.php">Intercoms</a></h4>
<div class="category">Commercial</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gallery-block col-lg-6 col-md-12 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="assets/images/gallery/cctv.jpg" alt="" />
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<h4><a href="cctv.php">CCTV</a></h4>
<div class="category">Commercial & Domestic</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gallery-block col-lg-3 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="assets/images/gallery/maintenance.jpg" alt="" />
<div class="overlay-box">
<div class="overlay-inner">
<div class="content">
<h4><a href="24hr-call-out-planned-maintenance.php">24hr Call Out & Planned Maintenance</a></h4>
<div class="category">Commercial & Domestic</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>