Main section width

[bobbytables2048]

The main section is limited to 1320 pixels wide and leaves space wasted on either side. It would be great if this could take up the full width of the screen. Is this an option that can be set?

[bastienwirtz]

Hi @bobbytables2048!

There is no option to do that yet, but it would be nice to have it. I add that to my todo list! Thanks.

[simonporte]

Please set it as an option, and maybe not default. As a user of a 21/9 screen, I can tell that sometimes full width content is overwhelming. And 32/9 screen does exist even if it is not widespread. The content should not be a lot bigger, stretched or be twice as much columns on ultra wide screens. Do not hesitate if you need more explanations. I can test the result if needed. Thanks.

[bobbytables2048]

Thanks @bastienwirtz - That would be great. I agree with @simonporte that this should be an option and not necessarily the default. My current setup is has multiple 16:9 monitors and I can imagine anything wider could end up looking too busy.

[DOWIT-JoelFrojmowicz]

This is an excellent feature to add to Homer. I've managed to change it by adding a custom CSS, but having an option in YAML would be much easier...

[bobbytables2048]

Hi @bastienwirtz - have you had any chance to look into this request? I know these are tough times and hope everything is OK.

[DOWIT-JoelFrojmowicz]

Hi, for those who need an alternative solution until Homer is fixed, here it go:

1. Create a new file alongside with "config.yaml" named "custom.css" with this content:

@charset "UTF-8";
.container {
  max-width: 2000px !important; // Adjust the "2000px" as you wish
}

2. On your "config.yaml" insert the following lines:

stylesheet:
  - "assets/custom.css"

And have fun with Homer!!

[bobbytables2048]

Thanks @DOWIT-JoelFrojmowicz - that workaround works well. Much neater then the css hacks I played with earlier.

[Nindouja]

I changed @DOWIT-JoelFrojmowicz snippet a bit to make it more generic.

/* Full width */
@charset "UTF-8";
.container {
  max-width: calc(100% - 100px) !important;
}

With this it take your whole screen minus 100px. So if you have a screen super wide it's not stuck at 2000pcx; and if ou have smaller one it won't overflow.

[simonl169]

I tried this, but it does not seem to have any effect on my dashboard...

[arminus]

Doesn't work for me either. custom.css is loaded properly, i.e. other styles there are applied but

@media screen and (min-width: 1024px) {
  .container {
    max-width: 2500px !important;
  }
}

doesn't have any effect.

The only workaround is to patch the minified index-e2ec3c11.css (which is bad obviously since that'll be overwritten by the next upgrade)

[DomiAlt]

I use

body #main-section .container {
    max-width: none;
}

for full width in my custom.css (same folder as config.yml)

And in the config:

stylesheet:
  - "assets/custom.css"

[arminus]

I think this might have been a cache issue after all (I'm loading it inside an iframe from another page and Firefox Ctrl+F5 doesn't refresh the iframe it seems). So max-width: none; does work after all.

[DomiAlt]

@arminus You can try this for the iframe: https://stackoverflow.com/a/3984072

[arminus]

Thanks, I just found out that there are more breakpoints, 1152 and 1344 as well - they all need to be set to none.