Show Results "centered" not working

Browsing6853

Steps to reproduce:
Go to All Settings > Appearance > Show Results and select Centered. Nothing will change.

Expected behavior:
I was expecting all search results to be located at the center of my display, instead of biased to the left.

System info:
Browser: Firefox
OS: Ubuntu Linux
Active kagi region setting: Brazil
What kagi server you connect to: US-EAST

I'm curious how the fact boards that appears at the right (and uses the rest of empty space) will be handled.

Vlad

Browsing6853 Unable to reproduce. Can you show a screenshot? (you need a large screen to see a difference between left and center aligned)

SabS

Browsing6853 It is surprising how they didn't implement this simple feature that requires some CSS. With google I used an extension called "Center Google Search Results" that did this.

Luckily there is a workaround with kagi. Go to settings -> Apperance, and in the box for writin css, type this:

`#main {
margin-left: 250px;
}

.center-content-box {
margin-left: 250px;
}`

You can adjust the px values to your screen size. Works great.

Browsing6853

Vlad It makes more sense now, I'm in a small screen that doesn't show any differences when you change this setting. When I try to zoom out, it works as expected. I don't like how the results are put in the right even when there is nothing to show there, but I guess this is not something solvable without major redesigns.

Vlad

Browsing6853

I don't like how the results are put in the right even when there is nothing to show there, but I guess this is not something solvable without major redesigns.

Not sure what you meant. Comparing it to other search engines with screenshot would be a good starting point.

Nyaa

Hi there,

I'm seeing the same issue, i would expect the results to be centered, but nothing seems to change?
See the screenshots.

Thank you.!

Centered:

Left:

Browsing6853

Nyaa Try to zoom out as I described before (probably Ctrl+-). Your screen is probably just too small for anything to happen.

Vlad

Nyaa What is the screen width?

imGira

Im having a similar issue.

This is "centered" on my large display using Waterfox.

Im guessing its a bit left of center for "facts type things" to fit on the side. But when there are non, it would be great to have true center. If that makes sence.

Vlad

imGira Yes it is because utilize the right side. Otherwise results would bounce left-right depending on what we have and that is arguably more annoying.

DarkCrow

EDIT: This also breaks the dropdown/context menu's, and haven't been able to fix it while keeping the style.

Touching upon SabS reply. I took it to GenAI and let ChatGPT generate the custom CSS for me. After iterating through multiple prompts, fixes etc, I finally got a satisfying result with two "minor" missing things as far as I could find out. Which are the missing Kagi logo and favicons from websites on the web results pages.

I'm using the Zen browser with build v1.13.1b.

IMPORTANT NOTE: I'm neither a fullstack or front-end developer and everything has been created by using GenAI. I can't guarantee if this works for other resolutions, but mine is 1080p. Keep in mind that it may break other things, since that's what happens a lot with custom CSS styling.

`/* 📌 Center main container without causing overflow */
#main,
.center-content-box {
margin-left: auto !important;
margin-right: auto !important;
padding: 0 16px !important;
max-width: 100vw !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}

/* 🔍 Expand search results column to full available width */
.results-column {
flex: 1 1 auto !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding-right: 16px !important;
}

/* ⚡ Constrain right-hand column / Quick Answer panel */
.right-content-box,
.side-panel {
flex: 0 0 320px !important;
width: 320px !important;
max-width: 320px !important;
min-width: 320px !important;
box-sizing: border-box !important;
}

/* 🧱 Results + right panel layout container */
.center-content-box._0_content-area.results-box {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
width: 100% !important;
max-width: min(1600px, 100vw) !important;
padding: 0 !important;
gap: 16px !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}

/* 🧼 Override legacy content-restricting wrappers */
.app-content.main-app-content,
div#_0_app_content {
max-width: 100vw !important;
width: 100% !important;
overflow-x: hidden !important;
}

/* ✅ Position footer correctly beneath results and aligned with results-column /
.footer-search-results {
flex: 0 1 auto !important;
width: calc(100% - 320px - 16px) !important; / total width minus right panel and gap */
max-width: calc(100% - 320px - 16px) !important;
box-sizing: border-box !important;
margin-top: 24px !important;
margin-left: 0 !important;
align-self: flex-start !important;
overflow: visible !important;
}

/* 📎 Properly scale footer sublayout such as “Share this Search” */
.copyToClip,
._0_share_url_footer.clipboardcopy {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
justify-content: center !important;
align-items: center !important;
}

/* 🧱 Ensure main behaves as reliable layout control point */
main#main {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
overflow-x: hidden !important;
max-width: 100vw !important;
box-sizing: border-box !important;
}

/* 🔧 Resolve top-of-page overflow issues (logo, searchbar, tabs) */
header,
.app-box-center,
div.header-search-results {
overflow-x: visible !important;
overflow-y: visible !important;
flex-shrink: 0 !important;
min-width: 0 !important;
box-sizing: border-box !important;
}

/* 🎯 Ensure logo remains visible and doesn't shrink /
.kagi-logo,
.logo,
div[class="logo"] {
display: block !important;
max-width: 100% !important;
height: auto !important;
flex-shrink: 0 !important;
visibility: visible !important;
}

/* 🧱 Prevent scrollbars on search input and tab rows */
.search-bar,
.tab-bar,
.lens-tabs,
.header-search-results {
overflow: visible !important;
width: auto !important;
max-width: 100% !important;
white-space: nowrap !important;
flex-wrap: wrap !important;
}

/* 🧼 Normalize search results container */
.results-column {
overflow: visible !important;
max-width: 100% !important;
min-width: 0 !important;
flex-shrink: 1 !important;
}

/* ⛔️ Remove hard overflow on ancestors */
body, html {
overflow-x: hidden !important;
overflow-y: auto !important;
}

/* 🧭 Preemptively scale layout wrappers correctly */
.0_app_content,
.0_content-bay,
.app-content-box,
#_0_app_content {
min-width: 0 !important;
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}

/* 🛠️ Remove cumulative padding from main and center-content-box */
main#main,
main.center-content-box,
main._0_content-area,
main.results-box {
padding: 0 !important;
margin: 0 auto !important;
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}

/* 🔍 Fix duplicate center-content-box outside <main> */
body > .app-box-center > .center-content-box {
padding: 0 !important;
margin: 0 auto !important;
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}

/* 🧱 Constrain flex-row layout to viewport */
.center-content-box._0_content-area.results-box {
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}

/* 🧼 Preemptively correct direct children of <main> */
main#main > * {
min-width: 0 !important;
flex-shrink: 1 !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}

/* ✅ Only correct header/top-panel center-content-box */
header .center-content-box,
.top-panel-box .center-content-box,
.app-header .center-content-box,
.app-content > .center-content-box:not(._0_content-area) {
overflow-x: hidden !important;
max-width: 100vw !important;
width: 100% !important;
box-sizing: border-box !important;
padding-left: 16px !important;
padding-right: 16px !important;
margin-left: auto !important;
margin-right: auto !important;
}

/* 🎯 Fix vertical overflow in header/top-panel .center-content-box */
.top-panel-box-inner > .center-content-box,
.app-content > .center-content-box:not(._0_content-area) {
overflow-y: hidden !important;
overflow-x: hidden !important;
height: auto !important;
min-height: unset !important;
max-height: none !important;
flex: 0 1 auto !important;
box-sizing: border-box !important;
align-items: center !important;
}`

Maybe the Kagi developers can further build upon this!

Kaan

why would results have to bounce left/right? they can actually be centered and the sidebar can be displayed on the side without affecting the layout of the main content.

boicote6969

i wrote a small css that keeps things responsive and is working so far, but requires previously setting the results alignment as centered

.app-header .app-content {
    justify-content: center;
}

.main-app-content {
    justify-content: center;
}

.right-content-box {
    padding: 0;
    margin: 0;
}

.top-panel-box-inner {
    justify-content: center;
}

Edit: Just noticed that it gets weird if the result includes this summary in the side. I don't know if there's a way to solve it with css, because it basically takes an element and puts it in a specific position in the HTML, but I'll edit this post if I find a way to do it.