SharePoint Online layout - Pls help to fix it...

%3CLINGO-SUB%20id%3D%22lingo-sub-1771400%22%20slang%3D%22en-US%22%3ESharePoint%20Online%20layout%20-%20Pls%20help%20to%20fix%20it...%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1771400%22%20slang%3D%22en-US%22%3E%3CP%3EHi%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECan%20SharePoint%20developer%20fix%20the%20following%20problem%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20trying%20to%20create%20a%20site%20on%20SharePoint%20online%2C%20I%20notice%20that%20when%20I%20insert%20a%20image%20as%20header%20and%20then%20input%20text%20at%20the%20bottom%2C%20there's%20always%20a%20gap.%26nbsp%3B%20%26nbsp%3BIt%20just%20don't%20look%20like%20it's%20one%20section%2C%20how%20can%20I%20remove%20the%20gaps%3F%26nbsp%3B%20Attached%20image%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SP%20gaps.jpg%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F225992i3CC22B9B73E2D389%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22SP%20gaps.jpg%22%20alt%3D%22SP%20gaps.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1771400%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1771563%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Online%20layout%20-%20Pls%20help%20to%20fix%20it...%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1771563%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F612792%22%20target%3D%22_blank%22%3E%40bbsin%3C%2FA%3E%26nbsp%3BUnfortunately%2C%20you%20can't%20remove%20the%20spacing.%20It%20is%20what%20it%20is.%20Once%20you%20save%2Fpublish%20the%20page%20the%20gaps%20should%20tighten%20up.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFrom%20a%20UI%2FUX%20perspective%2C%20the%20white%20space%20between%20images%20%26amp%3B%20text%20is%20a%20GOOD%20thing%20and%20I'm%20pleased%20I%20no%20longer%20have%20to%20manually%20figure%20it%20in.%20It%20helps%20with%20readability.%20Text%20that%20is%20between%20images%20can%20easily%20get%20lost%20as%20readers%20skim%20the%20page%20as%20your%20eye%20assumes%20it's%20a%20caption%20and%20skips%20it.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EModern%20pages%20aren't%20100%25%20perfect%2C%20but%20IMHO%20MSFT%20has%20done%20a%20pretty%20good%20job%20managing%20the%20UI%2FUX%20aspects%20for%20us.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1773133%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Online%20layout%20-%20Pls%20help%20to%20fix%20it...%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1773133%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F612792%22%20target%3D%22_blank%22%3E%40bbsin%3C%2FA%3E%26nbsp%3BResult%20is%20shown%20in%20the%20image%20below%3A%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22ArefHalmstrand_0-1602543149420.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F226155i3B5128488A450E5E%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22ArefHalmstrand_0-1602543149420.png%22%20alt%3D%22ArefHalmstrand_0-1602543149420.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETo%20reduce%20the%20distance%20further%2C%20you%20would%20need%20to%20update%20the%20margin%20top%20into%20%22-10px%22.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1814510%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Online%20layout%20-%20Pls%20help%20to%20fix%20it...%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1814510%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F284426%22%20target%3D%22_blank%22%3E%40ArefHalmstrand%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ethanks%3C%2FP%3E%3C%2FLINGO-BODY%3E
Contributor

Hi

 

Can SharePoint developer fix the following problem

 

I am trying to create a site on SharePoint online, I notice that when I insert a image as header and then input text at the bottom, there's always a gap.   It just don't look like it's one section, how can I remove the gaps?  Attached image

 

Thank you

SP gaps.jpg

5 Replies

@bbsin Unfortunately, you can't remove the spacing. It is what it is. Once you save/publish the page the gaps should tighten up.

 

From a UI/UX perspective, the white space between images & text is a GOOD thing and I'm pleased I no longer have to manually figure it in. It helps with readability. Text that is between images can easily get lost as readers skim the page as your eye assumes it's a caption and skips it. 

 

Modern pages aren't 100% perfect, but IMHO MSFT has done a pretty good job managing the UI/UX aspects for us.

@bbsin Hello,

Here is the code (simplified), to solve this:

document.getElementsByClassName("ControlZone")[1].style.marginTop = "0px"

 

NOTE! 

 

Yours sincerely,
Aref Halmstrand

@bbsin Result is shown in the image below:

ArefHalmstrand_0-1602543149420.png

 

To reduce the distance further, you would need to update the margin top into "-10px".

@bbsin You are welcome,

Please mark as best reply if this helped you. 

Yours sincerely,
Aref Halmstrand