Skip Navigation
Lemmy @lemmy.ml Vorthas @lemmy.ml

Wide-screen mode for Lemmy on desktop?

Is there a way to have Lemmy instances render in wide-screen mode (sort of like old reddit or older themes of Wikipedia)? I really dislike the default look of everything being in the center with tons of blank space on both sides (I use 1440p monitors).

For what it's worth, I came up with the following Stylus css script to work on the lemmy.ml (also works on github.com for what it's worth if you so choose):

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    max-width: 2560px !important;
}

.col-md-8 {
    flex: 0 0 85% !important;
    max-width: 85% !important;
}

.col-md-4 {
    flex: 0 0 15% !important;
    max-width: 15% !important;
}

Can just adjust max-width under the .container* options to whatever you want (I chose to set it to my monitor's width). The col-md-8 and col-md-4 are for the main content and sidebar respectively, so I have main content at 85% of the width and sidebar at 15% of the width. Result looks similar to this: https://i.imgur.com/FMAZYbh.png

Published my style here for use on Stylus: https://userstyles.world/style/10168/1440p-lemmy

10

You're viewing a single thread.

10 comments

  • The devs weren't really open for that idea but if more people nag them, we might get it :D. Alternatively, you could use a plugin like Greasemonkey and write a script that changes the sizes of the content.

    • Man I hope so. I detest the modern web "design" of squishing everything to the center. The whole reason I use wide-screen monitors is to make use of that horizontal space. and I like to full screen my browser and most programs too. I'll take a look at writing a Greasemonkey script in the meantime.

      • There's good reason for setting a maximum bound on the width though. It's much harder on the eyes to read long lines of text. That said, I do think Lemmy goes a bit overboard, and I would really like to see all of the non-post content on the right side anchored to the right edge rather than centered.

        • That's why it should be an option. I never thought it was harder on my own eyes to read long lines of text. If anything having big blank spaces on the left and right sides of the screen is more distracting to me.

      • I can see your point but I also don't like having to move my head by 45° from right to left everytime a line wraps.

        Would be cool if you'd share the script 😄

        • I managed to get something working (not really used to CSS editing) with a custom Stylus css: https://i.imgur.com/FMAZYbh.png

          Basically I put these into a Stylus style, still trying to figure out how to make it only affect Lemmy.ml domains but got a happy accident where it affects Github too so might keep it like this lol

          Just adjust max-width under the .containers to whatever size you desire (this really should be a user settable option) and I got the col-md-8 and col-md-4 options set to 80% (for main content) and 20% (for the sidebar content).

          .container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    max-width: 2560px !important;
}

.col-md-8 {
    flex: 0 0 80% !important;
    max-width: 80% !important;
}

.col-md-4 {
    flex: 0 0 20% !important;
    max-width: 20% !important;
}
10 comments