Why do modern pages leave so much white space?

%3CLINGO-SUB%20id%3D%22lingo-sub-203119%22%20slang%3D%22en-US%22%3EWhy%20do%20modern%20pages%20leave%20so%20much%20white%20space%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-203119%22%20slang%3D%22en-US%22%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhen%20using%20modern%20pages%2C%20there%20is%20always%20about%2025%25%20of%20the%20screen%20width%20that%20is%20unused%20on%20the%20right%20side.%26nbsp%3B%20Why%20won't%20any%20web%20parts%20extend%20further%20to%20the%20right%20and%20use%20that%20space%3F%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F35762i3954929C94BBFED6%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22ModernPageBlankSpace.png%22%20title%3D%22ModernPageBlankSpace.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-203119%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-292030%22%20slang%3D%22en-US%22%3ERe%3A%20Why%20do%20modern%20pages%20leave%20so%20much%20white%20space%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-292030%22%20slang%3D%22en-US%22%3ESo%20the%20communication%20site%20homepage%20template%20appears%20to%20allow%20you%20to%20use%20the%20full%20width%20of%20a%20browser%20only%20for%20the%20image%20and%20hero%20webparts.%20All%20other%20webparts%20will%20appear%20on%20the%20page%20as%20centre%20aligned.%3CBR%20%2F%3E%3CBR%20%2F%3EWhereas%20on%20the%20homepage%20template%20on%20a%20team%20site%20-%20there%20is%20no%20option%20to%20have%20a%20section%20that%20takes%20up%20the%20full%20width%20of%20a%20browser%20screen%2C%20and%20everything%20is%20left%20aligned%20-%20which%20generally%20looks%20pretty%20average%20on%20a%20laptop%20with%20a%20decent%20screen%20resolution!%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-225703%22%20slang%3D%22en-US%22%3ERe%3A%20Why%20do%20modern%20pages%20leave%20so%20much%20white%20space%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-225703%22%20slang%3D%22en-US%22%3E%3CP%3EMy%20experience%20is%20that%20every%20modern%20page%20layout%20in%20a%20team%20site%20(classic%20or%20modern)%20has%20this%20unused%20white%20space%20at%20the%20left.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20think%20it's%20weird%2C%20as%20you%20add%20a%20document%20or%20list%20webpart%20to%20a%20page%20and%20you%20get%20a%20horizontal%20scroll%20bar%20while%20there's%20loads%20of%20white%20space.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-225425%22%20slang%3D%22en-US%22%3ERe%3A%20Why%20do%20modern%20pages%20leave%20so%20much%20white%20space%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-225425%22%20slang%3D%22en-US%22%3E%3CP%3Eits%20really%20bizarre.%20I%20have%20the%20same%20issue%20as%20well%20for%20my%20sites%20as%20well.%20I%20created%20a%20publishing%20site%2C%20but%20I%20turned%20on%20Site%20Pages%20and%20changed%20the%20home%20page%20to%20a%20modern%20page%20-%20I%20have%20the%20same%20issue%2C%20with%20a%20bunch%20of%20white%20space%20to%20the%20right%20hand%20side.%3C%2FP%3E%3CP%3EI%20then%20created%20an%20O365%20Group%20and%20I%20had%20a%20look%20at%20the%20Team%20site%20there%20(thinking%20my%20issue%20could%20have%20been%20because%20I%20started%20with%20a%20publishing%20site%20-%20nope.%20The%20issue%20is%20here%20on%20the%20team%20site%20as%20well.%26nbsp%3B%3C%2FP%3E%3CP%3EI%20created%20a%20Communications%20site%20(Topic)%20and%20that%20one%20didnt%20have%20any%20extra%20white%20space%20on%20the%20right%20hand%20side.%20Which%20leads%20me%20to%20believe%20its%20something%20to%20do%20with%20the%20page%20layout.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-210926%22%20slang%3D%22en-US%22%3ERe%3A%20Why%20do%20modern%20pages%20leave%20so%20much%20white%20space%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-210926%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Magnus%20-%26nbsp%3BNot%20sure%20why%20I%20missed%20your%20reply%20until%20now.%26nbsp%3B%20I%20agree%20it%20looks%20like%20I%20have%203rd%20column%20that%20is%20empty%2C%20but%20that%20was%20not%20the%20case.%26nbsp%3B%20I%20believe%20that%20example%20was%20using%20a%202%20column%20layout.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-203620%22%20slang%3D%22en-US%22%3ERe%3A%20Why%20do%20modern%20pages%20leave%20so%20much%20white%20space%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-203620%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Tom!%3C%2FP%3E%3CP%3EIt%20seems%20like%20the%20section%20contains%20three%20columns%20and%20the%20third%20one%20is%20empty.%20Have%20You%20tried%20to%20switch%20the%20layout%20option%20from%20%22Three%20columns%22%20to%20%22Two%20Columns%22%3F%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F35867i05493A53303E1141%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%222%20Edit%20Section.PNG%22%20title%3D%222%20Edit%20Section.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F35868iEACBECD2264E11C8%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%223%20Change%20to%202%20sections.PNG%22%20title%3D%223%20Change%20to%202%20sections.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-885983%22%20slang%3D%22en-US%22%3ERe%3A%20Why%20do%20modern%20pages%20leave%20so%20much%20white%20space%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-885983%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20having%20the%20very%20same%20issue%20and%20am%20frustrated%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F89255%22%20target%3D%22_blank%22%3E%40Tom%20Castiglia%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt%20is%20not%20due%20to%20having%20an%20empty%20column.%20Why%20is%20the%20right%20side%20have%20all%20this%20wasted%20space%3F%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F134924i6C717F64F4EB3EE1%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%222019-10-01_101228.png%22%20title%3D%222019-10-01_101228.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-885993%22%20slang%3D%22en-US%22%3ERe%3A%20Why%20do%20modern%20pages%20leave%20so%20much%20white%20space%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-885993%22%20slang%3D%22en-US%22%3EThis%20is%20not%20the%20issue.%20I%20have%20the%20same%20problem%20where%20on%20all%20of%20my%20modern%20pages%20there%20is%20a%20huge%20white%20blank%20column%20on%20the%20right%20side%20no%20matter%20what%20I%20select%20in%20the%20sections.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1070031%22%20slang%3D%22en-US%22%3ERe%3A%20Why%20do%20modern%20pages%20leave%20so%20much%20white%20space%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1070031%22%20slang%3D%22en-US%22%3EYup%20-%20we%20get%20too%20when%20in%20full-screen.%20It%20must%20be%20by%20design%20as%20they%20disappear%20when%20the%20window%20is%20made%20smaller.%3CBR%20%2F%3E%3CBR%20%2F%3EFull%20screen%3A%20%3CA%20href%3D%22https%3A%2F%2Fi.imgur.com%2FIrKRQ6v.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fi.imgur.com%2FIrKRQ6v.png%3C%2FA%3E%3CBR%20%2F%3EWindowed%3A%20%3CA%20href%3D%22https%3A%2F%2Fi.imgur.com%2F14ZJSsr.png%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fi.imgur.com%2F14ZJSsr.png%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3EThat%20said%2C%20there%20is%20a%20school%20of%20thought%20that%20says%20that%20narrow%20columns%20are%20easier%20to%20read%20-%20your%20eye%20doesn't%20scan%20as%20much.%20So%20I'm%20okay%20with%20the%20white%20band.%20I%20think%20this%20is%20why%20newspapers%20have%20narrow%20columns%3C%2FLINGO-BODY%3E
Contributor

 

When using modern pages, there is always about 25% of the screen width that is unused on the right side.  Why won't any web parts extend further to the right and use that space?

ModernPageBlankSpace.png

 

 

 

8 Replies

Hi Tom!

It seems like the section contains three columns and the third one is empty. Have You tried to switch the layout option from "Three columns" to "Two Columns"?

2 Edit Section.PNG

 

 

3 Change to 2 sections.PNG

Hi Magnus - Not sure why I missed your reply until now.  I agree it looks like I have 3rd column that is empty, but that was not the case.  I believe that example was using a 2 column layout.

its really bizarre. I have the same issue as well for my sites as well. I created a publishing site, but I turned on Site Pages and changed the home page to a modern page - I have the same issue, with a bunch of white space to the right hand side.

I then created an O365 Group and I had a look at the Team site there (thinking my issue could have been because I started with a publishing site - nope. The issue is here on the team site as well. 

I created a Communications site (Topic) and that one didnt have any extra white space on the right hand side. Which leads me to believe its something to do with the page layout. 

 

My experience is that every modern page layout in a team site (classic or modern) has this unused white space at the left. 

 

I think it's weird, as you add a document or list webpart to a page and you get a horizontal scroll bar while there's loads of white space.

So the communication site homepage template appears to allow you to use the full width of a browser only for the image and hero webparts. All other webparts will appear on the page as centre aligned.

Whereas on the homepage template on a team site - there is no option to have a section that takes up the full width of a browser screen, and everything is left aligned - which generally looks pretty average on a laptop with a decent screen resolution!

I am having the very same issue and am frustrated@Tom Castiglia 

It is not due to having an empty column. Why is the right side have all this wasted space?

2019-10-01_101228.png

This is not the issue. I have the same problem where on all of my modern pages there is a huge white blank column on the right side no matter what I select in the sections.
Yup - we get too when in full-screen. It must be by design as they disappear when the window is made smaller.

Full screen: https://i.imgur.com/IrKRQ6v.png
Windowed: https://i.imgur.com/14ZJSsr.png

That said, there is a school of thought that says that narrow columns are easier to read - your eye doesn't scan as much. So I'm okay with the white band. I think this is why newspapers have narrow columns