How can we reduce spacing between rows within a same container in Service Portal ??

[Gulzar Manuja2]

Dear All,

Greetings !!!

I have a requirement where I would like to reduce the space between rows within a same container. For instance, I have 3 rows on Container-1 of my default Service Portal page as shown below:  

Since, there is lots of space between row 1(Hi Gulzar) and row 2(We are happy to see you here) and similarly between row 2 and row 3, I would like to reduce it as extra space is covering our entire Service Portal page.

I would be extremely grateful if someone can suggest me how to reduce the gap/space between row 1 and row 2 and similarly between row 2 and row 3. 

Thanks & Regards,

Gulzar Manuja

[Jaspal Singh]

Hi Gulzar,

Do a Crtl + Right click & open the page in Designer view & adjust containers. Once done can you kindly provide a screenshot

[Gulzar Manuja2]

Hi Jaspal,

Thanks for your response.

I am presuming you meant "adjust the rows" instead of "adjust the containers". Kindly correct me if my understanding is incorrect.

Step 1: Ctrl + right click on the portal page. Page opened in Designer as shown below: 

Step 2: Again I am assuming that by "adjusting the rows", you meant drag and drop row 1 just above row 2 as shown in the screenshot below:

As soon as I released the mouse button, Row 1 went back to its original location on the container shown as follows:

Kindly let me know if I have done something incorrectly.

Thanks & Regards,

Gulzar Manuja

[Barrilito van D]

 Hi Gulzar,

In general, changing the look and feel of the portal does not require "servicenow" knowledge, it is just web design and styling. In this case you need to adjust some styling. If you don't have any idea at this point how to do that it will be difficult to explain. Looking at Jaspal's reply I see where he wants to go to help you, but it will be difficult.

Try to start easy and understand that the portal page is made up with some standard out of the box (bootstrap) styling. In your case I bet there is somewhere in the page an div element named "homepage-search" and that element has some styling:

.wrapper-xl {
    padding: 50px !important;
        padding-top: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
        padding-left: 50px;
}

As you can see, around that search element out of the box you get a lot of padding (space) for free around the object 🙂 If that is not what you want you can change that. But you can do that in several ways, many times people change it in the css file included in the portal (lookup the portal and the attachted stylesheets). In general that is how you should approach it, but as said, hard to explain this relatively simple task if you are not known in styling webpages. Hope it helps anyway and gives you a little start.

---

If you think my answer put you in the right direction or you appreciated my effort, please mark the response as Helpful (👍). That way other people in the community will probably be triggered to read the responses too. If my answer solved your issue, please mark my response as Correct (✅). In the list of question people like me that want to help out will know your question was already answered and others that are curious to the answer know a good answer is given in the thread.
Thanks in advance! Good luck!