Reduce space between containers in Service Portal

[brianrichards]

Hi there,

I am trying to achieve a specific design for our Service Portal using the background color of containers, but the default vertical spacing between them is messing up the look. I can't seem to find the right place to apply a style that will allow me to reduce the spacing to zero. Anyone know what I'm looking for here?

- Brian

[rgm276 · Accepted solution]

are you talking about between containers , or within the same container?

either way you should be able to find the CSS item(s) that you need to adjust using Google Chrome Inspect (or other browser equivalent)

but as an   example:

if I set the background color to orange, but want to adjust each widget to have more/less spacing, then

then an inspect will lead me to wanting to adjust the margin-bottom for the .panel class

as well as the the .col-xx-xx padding-left and padding-right values

by adding my own custom css stylesheet to my portal theme,

I can override/adjusting the css values of all of these to zero ,I can condense (or increase to expand) the view of the portal widgets

[ChrisBurks]

It's also possible to set class names for the parts of the "container" that widgets are dragged onto to get more specific on setting css styles.

Just click into a widget container and select either Container, Row, or Column at the top of the page in the Page Designer. Then select the edit icon. There you will see the "CSS class" field to set a class name.

After setting any or all of those classes, now you can be more specific for setting styles for a particular widget(s) either within the specific widgets CSS style fields or on the CSS style sheet for the overall Portal.

EDIT:

I also forgot that the CSS can be set at the page level too by clicking the "Edit Page Properties" at the top right corner of the Page Designer.

[prashantatsastr]

Hi Brian,

Could you provide the snippet of layout used by your Service portal page?

Please look for 'layouts' under 'Content Management' application.

One of my suggestion would be to configure the layout with single column similar to below. I am proceeding assuming few things. (It might not be more relevant. but I could be more specific if I know more details.) Hope you will get the idea.

<div style="width:80%;height:100%" align="center">

  <table class="example" align="center" border-radius= "15px 50px 30px 5px" frame="box" border="1" cellspacing="10" cellpadding="70" id="${jvar_name}" width="1000px" height="100%">

  <tr>

  <td id="dropzone0" dropzone="true" valign="top" style="width:226px" class="e2" height="100%"/>

  </tr>

  </table>

</div>

<style type="text/css">

    .example {

              background: #f1f1f1;

              font-family:'Helvetica Neue',sans-serif;

  font-size:12px;

              border-radius: 15px;float:center;

              margin-left: 100px;

            margin-top:0px;

              }

</style>

Please reduce the 'cellspacing' to zero to reduce the gap between cells.

Please let me know if you need more details.

P.S.- Please hit like, Helpful or Correct depending on the impact of the response.

[Piotr Ba_amut]

Hi there, 

There has worked out the following class on my end added to the Page Specific CSS

body .padding-top {

        padding-top: 0rem;
}