SharePoint Modern Site Pages WebPart Issue

%3CLINGO-SUB%20id%3D%22lingo-sub-1202356%22%20slang%3D%22en-US%22%3ESharePoint%20Modern%20Site%20Pages%20WebPart%20Issue%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1202356%22%20slang%3D%22en-US%22%3E%3CP%3EIn%26nbsp%3B%20modern%20site%20pages%20webpart%20in%20a%20three%20column%20webpart%2C%202%20column%20alone%20has%20increased%20in%20width%20with%20no%20unusual%20changes%20made%20to%20the%20page%20by%20the%20end-user%20pushing%203rd%20column%20out%20of%20the%20screen%20with%20no%20scroll%20option%20either%2C%20only%20way%20to%20get%20the%20page%20back%20to%20normal%20is%20by%20reducing%20the%20zoom%20on%20the%20page.%20Anyone%20else%20has%20this%20issue%2C%20looks%20like%20a%20bug.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1202356%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-1203662%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Modern%20Site%20Pages%20WebPart%20Issue%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1203662%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F53659%22%20target%3D%22_blank%22%3E%40Sai%20Gutta%3C%2FA%3E%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20tried%20to%20reproduce%20the%20issue%20and%20was%20not%20successful.%20My%20site%20pages%20respond%20as%20expected.%20Can%20you%20share%20steps%20to%20reproduce%3F%3C%2FP%3E%0A%3CDIV%20id%3D%22tinyMceEditorNorman%20Young_0%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Annotation%202020-03-01%20183844.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F174416i02F6091AA3CB62BD%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Annotation%202020-03-01%20183844.png%22%20alt%3D%22Annotation%202020-03-01%20183844.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EI%20hope%20this%20helps.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENorm%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1204582%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Modern%20Site%20Pages%20WebPart%20Issue%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1204582%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F53659%22%20target%3D%22_blank%22%3E%40Sai%20Gutta%3C%2FA%3E%26nbsp%3BYeah%2C%20I%20think%20we%20need%20to%20know%20more%20about%20what%20you%20were%20doing%20and%20how%20it%20happened.%20So%20you%20built%20a%20new%20page%2C%20made%20it%20into%203%20columns%20and%20POOF!%20The%202nd%20column%20was%20oddly%20bigger%20and%20pushed%20the%203rd%20column%20off%20the%20page%3F%20Or%20did%20you%20add%20a%20web%20part%3F%20Which%20one%3F%20Where%3F%20What%20content%20is%20in%20the%203rd%20column%3F%20Did%20you%20change%20the%20size%20of%20your%20browser%20window%3F%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPart%20of%20responsive%20design%20is%20that%20it%20will%20adjust%20the%20columns%20and%20layouts%20to%20fit%20the%20size%20of%20your%20monitor%20screen.%20If%20your%20screen%20is%20too%20narrow%20to%20support%203%20columns%20AND%20you%20have%20a%20web%20part%20in%20another%20column%20that%20can't%20be%20shrunk%20to%20accommodate%2C%20then%20SharePoint%20will%20adjust%20the%20layout%20to%20fit%20all%20your%20content%20on%20screen%20in%20the%20best%20way%20possible%20-%20which%20usually%20results%20in%20a%20vertical%20layout.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPersonally%2C%20I%20try%20to%20design%20pages%20for%2011-13%22%20laptop%20screens%20rather%20than%20broad%20monitors%20because%20it%20makes%20my%20pages%20more%20consistent%20across%20more%20screens.%20This%20means%20I%26nbsp%3B%20avoid%203%20column%20layouts%20whenever%20possible%20as%20they%20don't%20work%20well%20on%20smaller%20screens.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1214297%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Modern%20Site%20Pages%20WebPart%20Issue%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1214297%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you%2C%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F111382%22%20target%3D%22_blank%22%3E%40Norman%20Young%3C%2FA%3E%26nbsp%3Band%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F57004%22%20target%3D%22_blank%22%3E%40Rachel%20Davis%3C%2FA%3E%26nbsp%3BLooks%20like%20a%20corrupted%20page%20or%20like%20Rachel%20said%20the%20layout%20is%20resized%20based%20on%20the%20size%20of%20the%20screen%20the%20end-user%20is%20editing%20the%20modern%20page%2C%20we%20are%20working%20on%20creating%20a%20brand%20new%20page%20and%20replicating%20the%20content.%20No%20issues%20as%20of%20now.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Frequent Contributor

In  modern site pages webpart in a three column webpart, 2 column alone has increased in width with no unusual changes made to the page by the end-user pushing 3rd column out of the screen with no scroll option either, only way to get the page back to normal is by reducing the zoom on the page. Anyone else has this issue, looks like a bug.

3 Replies
Highlighted

Hi @Sai Gutta,

 

I tried to reproduce the issue and was not successful. My site pages respond as expected. Can you share steps to reproduce?

 

Annotation 2020-03-01 183844.png

I hope this helps.

 

Norm

Highlighted

@Sai Gutta Yeah, I think we need to know more about what you were doing and how it happened. So you built a new page, made it into 3 columns and POOF! The 2nd column was oddly bigger and pushed the 3rd column off the page? Or did you add a web part? Which one? Where? What content is in the 3rd column? Did you change the size of your browser window? 

 

Part of responsive design is that it will adjust the columns and layouts to fit the size of your monitor screen. If your screen is too narrow to support 3 columns AND you have a web part in another column that can't be shrunk to accommodate, then SharePoint will adjust the layout to fit all your content on screen in the best way possible - which usually results in a vertical layout.

 

Personally, I try to design pages for 11-13" laptop screens rather than broad monitors because it makes my pages more consistent across more screens. This means I  avoid 3 column layouts whenever possible as they don't work well on smaller screens.

Highlighted

Thank you, @Norman Young and @Rachel Davis Looks like a corrupted page or like Rachel said the layout is resized based on the size of the screen the end-user is editing the modern page, we are working on creating a brand new page and replicating the content. No issues as of now.