The layout of the new responsive modern page

%3CLINGO-SUB%20id%3D%22lingo-sub-23017%22%20slang%3D%22en-US%22%3EThe%20layout%20of%20the%20new%20responsive%20modern%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-23017%22%20slang%3D%22en-US%22%3E%3CP%3EDoes%20anyone%20know%20if%20the%20layout%20of%20the%20new%20responsive%20modern%20page%20is%20fixed%20(one%20column)%3F%20If%20you%20read%20this%20page%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdev.office.com%2Fsharepoint%2Fdocs%2Fspfx%2Fweb-parts%2Fbasics%2Fdesign-considerations-for-web-parts%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EDesign%20considerations%3C%2FA%3E%26nbsp%3Bfrom%20dev.office.com%20it%20ambiguous%20to%20me%2C%20because%20the%20section%20%22Max%20width%22%20says%26nbsp%3B%3CEM%3EThe%20page%20and%20column%20widths%20are%20defined%20by%20the%20page%20template%20but%20can%20be%20modified%20by%20the%20author%26nbsp%3B%3C%2FEM%3Ebut%20the%20image%20below%20illustrates%20the%20single%20column%20page%20layout.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20we%20-%20as%20an%20author%20-%20can%20change%20this%20column%20width%20-%20or%20even%20add%20additional%20columns%2C%20please%20point%20me%20in%20the%20right%20direction.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20can%20see%2C%20that%20%22%3CSPAN%3E.SPCanvas-canvas%22%20also%20has%20a%20max-width%20set.%20Why%3F%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20in%20advance%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-23017%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EResponsive%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-23026%22%20slang%3D%22en-US%22%3ERe%3A%20The%20layout%20of%20the%20new%20responsive%20modern%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-23026%22%20slang%3D%22en-US%22%3E%3CP%3EMy%20understanding%20is%20right%20now%20it%20is%20only%20a%20single%20column%20(unchangeable)%2C%20but%20they%20are%20working%20on%20adding%20additional%20layouts%20in%20the%20future.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20%26nbsp%3Bnot%20a%20huge%20fan%20of%20the%20single%20column%2C%20though%20i%20get%20it%20from%20the%20multiple%20device%20perspective%2C%20but%20there%20are%20lots%20of%20examples%20like%20bootstrap%20out%20there%20that%20can%20easily%20demonstrate%20how%20to%20stack%20and%20shape%20multiple%20columns.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWe've%20been%20using%20bootstrap%20in%20SharePoint%20Online%20for%20years%2C%20so%20our%20users%20are%20used%20to%20the%20responsive%20multi-column%20approach%2C%20would%20love%20to%20see%20this%20get%20in%20place%20before%20we%20start%20trying%20to%20leverage%20modern%20pages...%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2218752%22%20slang%3D%22en-US%22%3ERe%3A%20The%20layout%20of%20the%20new%20responsive%20modern%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2218752%22%20slang%3D%22en-US%22%3EI%20totally%20agree%20we%20should%20have%20the%20flexibility%20to%20apply%20any%20layouts%20design%20and%20css%20on%20sharepoint%20and%20not%20be%20limited%20to%20what%20Microsoft%20gives%3C%2FLINGO-BODY%3E
New Contributor

Does anyone know if the layout of the new responsive modern page is fixed (one column)? If you read this page Design considerations from dev.office.com it ambiguous to me, because the section "Max width" says The page and column widths are defined by the page template but can be modified by the author but the image below illustrates the single column page layout.

 

If we - as an author - can change this column width - or even add additional columns, please point me in the right direction.

 

I can see, that ".SPCanvas-canvas" also has a max-width set. Why?

 

Thanks in advance :)

2 Replies

My understanding is right now it is only a single column (unchangeable), but they are working on adding additional layouts in the future.

 

I'm  not a huge fan of the single column, though i get it from the multiple device perspective, but there are lots of examples like bootstrap out there that can easily demonstrate how to stack and shape multiple columns.

 

We've been using bootstrap in SharePoint Online for years, so our users are used to the responsive multi-column approach, would love to see this get in place before we start trying to leverage modern pages...

I totally agree we should have the flexibility to apply any layouts design and css on sharepoint and not be limited to what Microsoft gives