Banner too large

I love that we are able to upload our own banners, and it looks fine on a phone, but on my desktop the banner now renders to take up nearly half of the vertical viewport.

That’s true no matter what banner I use, even the default nocodb banner which previously did not take up so much room.

How can we control the rendered size of the banner?

Even better, can we opt to remove the banner entirely?

1 Like

This is what it looks like on my laptop & we felt this should be ok as it scrolls away. Can you share how it appears for you on your desktop?
We missed providing an option to exclude banner. We will work it out.


Here it is on my desktop.

Thats a bug. Can you help us with following information for us to reproduce?

  • OS (Windows / MAC / Linux)
  • Browser

We have now provisioned an additional option as requested to allow users to disable banner. This will be available from next release.

Thanks for the details @RichardC

1 Like

I’m self-hosted on unRaid. My browser is Chrome on Win 10. Everything is updated.

Here is the HTML that renders the banner:

<div
  data-v-7cefabca=""
  class="nc-form-banner-wrapper w-full mx-auto bg-white border-1 border-gray-200 rounded-2xl overflow-hidden flex-none dark:border-none"
  style="aspect-ratio: 4 / 1"
>
  <div class="h-full flex items-stretch justify-between">
    <div class="flex">
      <img
        src="https://noco.net/dashboard/_nuxt/form-banner-left.DrBQfBtv.png"
        alt="form-banner-left'"
      />
    </div>
    <div class="w-[91px] flex justify-center">
      <img
        class="max-h-full self-center"
        src="https://noco.net/dashboard/_nuxt/256x256.DJId9Ub8.png"
        alt="form-banner-logo'"
      />
    </div>
    <div class="flex justify-end">
      <img
        src="https://noco.net/dashboard/_nuxt/form-banner-right.BmbQm2JY.png"
        alt="form-banner-left'"
      />
    </div>
  </div>
</div>

Hey @RichardC,
Can you please provide parent div details of banner, we added max width restriction in parent div

The parent div:

<div data-v-7cefabca="" class="h-full flex flex-col items-center">