Creating screen wide sections graphically (with layouts) is a pain in the ***tt. I want to make a free block with a screen wide section with an editable area to place other blocks in it.
The first problem is a ‘container-fluid’ doesn’t do anything in Concrete CMS (it doesn’t make it span full width) or I can make it span screen wide with some css but it shows a horizontal scroll bar I can’t get rid of. I just can’t figure how to make one work or the other after reading hundreds of posts on the internet - all in vain.
The second problem is the Area inside the block stuffs up the layout and rich text editor so that it’s nearly impossible to select the internal layout or block after saving it.
So, if you can share your working ideas, I’ll form it as a package and submit it to the Marketplace for free.
So far I have this with the above problems:
<style>
.full-width {
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}
</style>
<section>
<div class="container-fluid full-width" style="background-color: <?php echo $bg_color; ?>;">
<?php
$a = new Area('Full Width Section ' . $bID);
$a->enableGridContainer();
$a->display($c);
?>
</div>
</section>
I think such a free block will be really useful in styling modern sites.