SharePoint Modern Vertical Column on Small Screens

StephenBradley 

I was dealing with the same situation. The sharepoint modern sites are a bit strict on what you can do. I managed to not need the 90 % zoom by injecting javascript. I'll share the steps how I've found a solution:

• I already had a custom sharepoint webpart installed, that let's me inject custom javascript onto the page -> SharePoint Online – install Modern Script Editor Web Part for SharePoint Online Modern Site – Ashish Bhardwaj Blog (wordpress.com)
• Tried a lot of ways, messing with the elements styles. First tried with jquery, but couldn't get it to work with sharepoint. Finally I noticed something. When zooming in, so that the section column goes way, the style  disappears from the div

   

  
  

   

  Here's a print of the DIV, on my case (the webparts are covered):

•  In the end I got it to work copying the style of this DIV, and the two below (in my case it's a normal section and a colunm section) when the screen is okay, and setting it up when the screen is small. In the javascript I put:

if (window.screen.width < 1365){
	document.querySelector("#spPageCanvasContent > div > div > div > div").style.cssText = "-webkit-font-smoothing: antialiased;display: flex;margin: 0 auto;max-width: 1648px;user-select: text;color: rgb(0, 0, 0);font-weight: 400;font-size: 14px;-webkit-font-smoothing: antialiased;"

document.querySelector("#spPageCanvasContent > div > div > div > div > div.g_b_50a7110f").style.cssText = " -webkit-font-smoothing: antialiased; font-size: 14px; font-weight: 400; color: rgb(0, 0, 0); user-select: text; width: 75%;"

document.querySelector("#spPageCanvasContent > div > div > div > div > div.h_b_50a7110f").style.cssText = " -webkit-font-smoothing: antialiased; font-size: 14px; font-weight: 400; color: rgb(0, 0, 0); user-select: text; width: 25%;"

}

I think all those styles are not necessary, only the ones related to size.

Same, 1356px is too large for a sidebar to collapse. The expected behavior would be for both columns to shrink in size first before stacking.

StephenBradley  I'm interested in solutions as well. On common monitors here at work - resolution 1280 x 1024, browsers at 100% push the vertical column to the bottom. This just started happening a month ago - before, as I started using verticals, it displayed fine.

Now I have to use 90% zoom to get the correct display, and if this continues when we go live with our new intranet that's how I'm going to have to train on it.

And this is over all the Edges and Chrome as well. Something changed in the SharePoint page formatting or Win10 display formatting - there's either extra padding or margins or something. Fonts and sizes haven't changed.

It's really annoying.