How to Reduce Banner Image Width(branding) in Knowledge Portal (Service Portal)

[FemyM]

Hi Community,

I'm trying to reduce the width of the banner image in the Knowledge Portal (built on Service Portal). When I inspect the element, I see a banner-container.
How can i reduce the width of banner image.

[Dr Atul G- LNG]

It should not be I tried with a small size image and it worked as small for me on the portal.

[Service_RNow]

@FemyM 

Use Custom CSS (Preferred)

1. Go to:
   Service Portal > Themes
   (Edit the theme applied to your Knowledge Portal)

2. In the CSS Variables or CSS field, add a rule like:

css

.banner-container {

max-width: 800px; /* or any width you prefer */ margin: 0 auto; /* keeps it centered */ }

You can also use width instead of max-width if you want it to be a fixed size:

css

.banner-container {

width: 800px; margin: 0 auto; }

1. Clear your cache (or do a hard refresh) to see the changes.

✅Option 2: Page-specific CSS (using a Widget)

If you want to apply it only to a specific page:

1. Add a Simple CSS widget or a custom widget to that page.

2. In that widget, inject the following CSS:

html

CopyEdit

<style> .banner-container { max-width: 800px; margin: 0 auto; } </style>

✅Extra Tip:

If the image inside the container is still stretching full width, you may need to also target the <img> tag:

css

.banner-container img {

width: 100%; height: auto; object-fit: cover; /* Optional: keeps image nicely cropped */ }

Hope the answer has helped you, please mark the answer correct/helpful. Thank you.