Fixing CSS in lightning community

Question

I'm trying to fix css for the lightning community, I have created a custom theme for a community, and my component implements forceCommunity:layout, due to forceCommunity:layout by default max-width is set to 1440px; I tried to override this it but as it's a parent element so I'm not able to override it. Please check below image

I tried following css but all elements are misplaced now

    left: 0;
position: absolute;
width: 100%;

Now elements are fit in the screen but all elements are overlapped on each other, need some help here, thanks in advance.

Answer 1

You will need to create a custom Theme layout if you want to expand/change the width of your page, since the content layout is embedded within the content area of the custom theme layout component.

Create Custom Theme Layout Components for Communities

your theme layout would then be set in the mainContentArea below:

<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
    <aura:attribute name="search" type="Aura.Component[]" required="false"/>
    <aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
    <aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
    <aura:attribute name="newHeader" type="Aura.Component[]" required="false"/>
    <div class="themed-page">
        <div class="searchRegion">
            {!v.search}
        </div>
        <div class="profileMenuRegion">
            {!v.profileMenu}
        </div>
        <div class="navigation">
            {!v.navBar}
        </div>
        <div class="newHeader">
            {!v.newHeader}
        </div>
        <div class="mainContentArea">
            {!v.body}
        </div>
    </div>
</aura:component>

Style.css

.THIS .themed-page{
    width: 100%;
}