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

enter image description here

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.

  • were you able to resolve? – glls Jan 14 at 22:18
  • I'm working on it..I'll update it once done..sorry for delay – Atul Rakate Jan 16 at 7:22

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">
        <div class="profileMenuRegion">
        <div class="navigation">
        <div class="newHeader">
        <div class="mainContentArea">


.THIS .themed-page{
    width: 100%;
  • Hey, thanks for the help @glls, that worked for me, now all required div sections are stretched to fit – Atul Rakate Jan 16 at 16:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.