[SalesForce] Lightning Community full width and 0 margin layout

I am trying to create a page layout with full width and 0 margin in custom layout.

Community Theme Full width layout

I have gone through the above post as well but it doesn't seems to be working in my situation.

<aura:component implements="forceCommunity:layout" description="Custom Content Layout" access="global">
<aura:attribute name="header" type="Aura.Component[]" required="false"></aura:attribute>
<aura:attribute name="bottom" type="Aura.Component[]" required="false"></aura:attribute>
<aura:attribute name="leftVal" type="Aura.Component[]" required="false"></aura:attribute>
<aura:attribute name="cernterVal" type="Aura.Component[]" required="false"></aura:attribute>
<aura:attribute name="rightVal" type="Aura.Component[]" required="false"></aura:attribute>

<div class="container">
    <div class="contentPanel">
        <div class="centerheader">
            {!v.header}
        </div>
        <div class="row">
            <div class="column">
                {!v.leftVal}
            </div>
            <div class="column">
                {!v.cernterVal}
            </div>
            <div class="column">
                {!v.rightVal}
            </div>
        </div>
        <div class="bottonfooter">
            {!v.bottom}
        </div>
    </div>
</div>

This is my custom component

    .THIS .contentPanel:before,
.THIS .contentPanel:after {
    content: " ";
    display: table;
}
.THIS .contentPanel:after {
    clear: both;
}
.THIS .centerheader {
    width: 100%;
}
.THIS .bottonfooter {
    float: left;
    width: 100%;
}

.THIS .left {
    width: 25%;
}
.THIS .right {
    width: 25%;
}
.THIS .center {
    width: 50%;
}
.THIS .column {
    float: left;
    width: 33.33%;
}
.THIS .row:after {
    content: "";
    display: table;
    clear: both;
}

.comm-page-PAGENAME .cCenterPanel {
    max-width:100% !important;       
    margin:0
}

This is the CSS.

But when I tried to save I got an error

force-app/main/default/aura/customLayout/customLayout.cmp Issue(s)
found by CSS Parser (c.customLayout):CSS selector must begin with
'.cCustomLayout' or '.THIS' (line 36, col 1)

Please help me with this to achieve a full width layout.

Best Answer

You're receiving the error due to the last css block. To resolve the error, you'll need to add .THIS before .comm-page-PAGENAME .cCenterPanel, see below. As for achieving full-width, have you tried overriding the Community's CSS?

Original

.comm-page-PAGENAME .cCenterPanel {
    max-width:100% !important;       
    margin:0
}

Replace with this

.THIS .comm-page-PAGENAME .cCenterPanel {
    max-width:100% !important;       
    margin:0
}
Related Topic