Widget oob issue

[servicenow_devo]

Hi, 

I need help in configuring out of box widget breadcrumbs. If you see the breadcrumbs in kb article page the spacing between trails is too much. So I have to reduce space in between 2 lines of breadcrumbs. What can be the ideal solution of this. Can anyone help me with css and html for this

Thanks

[Tushar]

Hi @servicenow_devo 

To reduce the space between the trails in the out-of-box widget breadcrumbs on a KB article page, you can try to add below CSS code:

.sn-breadcrumb-trail {
  margin-bottom: 0.25rem;
}

This CSS code will set the margin-bottom property of the .sn-breadcrumb-trail class to 0.25rem, which will reduce the space between the trails.

To use this CSS code, you can add it to a custom CSS file and then load the custom CSS file on the KB article page or you can also add the CSS code directly to the KB article page using a script tag.

Please, don't forget to mark my answer as correct if it solves your issue or mark it as helpful if it is relevant for you!

Regards,
Tushar

[Riya Verma]

Hi @servicenow_devo ,

Hope you are doing great.

You can modify the spacing between the breadcrumb trails by applying custom CSS.

1. Go to Service Portal > Widget Instances.
2. Find and select the widget instance where the breadcrumbs are displayed.
3. In the widget instance, you can add custom CSS to modify the appearance of the breadcrumbs.
4. You might want to add CSS rules to reduce the margin or padding between the breadcrumb items.

Reference CSS to reduce spacing between breadcrumbs:

/* Target the breadcrumb items */
.sn-breadcrumb-list-item {
    margin-right: 5px; /* Adjust the right margin of each breadcrumb item */
}

/* Target the breadcrumb separators (usually ">") */
.sn-breadcrumb-list-item + .sn-breadcrumb-list-item:before {
    margin-left: 5px; /* Adjust the left margin of each separator */
}