V8: I want to make free screen wide section block

Developing with Concrete
1

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.

2

You can change block to “full width” by disabling grid container.

Screen Shot 2021-07-19 at 16.35.43
Screen Shot 2021-07-19 at 16.35.431080×676 130 KB

Also, you can set “full-width” class as area class or block class.
https://documentation.concretecms.org/developers/pages-themes/designing-for-concrete5/advanced-css-and-javascript-usage/adding-custom-css-classes-to-blocks-areas-and-the-editor

1 Like
3

@hissy, I have already figured out how to do that graphically:

But I want to make a screen wide block with an area. And it doesn’t work. I need a working code because mine doesn’t work.

4

IMO you should check built-in Elemental theme because you can switch a block to full-width easily.

5

@hissy , I don’t need to switch it, I need to code it and code it so that it doesn’t show the scroll bar and the edit area doesn’t stuff up the rest of the page and it’s actually editable. That doesn’t happen with the above code.

6

@linuxoid
I think @hissy is pointing you in the right direction. Further information about the grid container can be found here: Disabling the grid container