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

  • Scrubbles@poptalk.scrubbles.techEnglish
    1·
    1 year ago

    I’ve seen two major items on Reddit that are annoying redditors from switching over. First is an old-reddit style wide mode (this could be a toggle in the settings, compact or wide mode). Second is user signup. While we here know that users should spread out, most users find that confusing and just walk away from it. Lemmy should follow the mastadon approach and decide on a simple to use portal to guide users in.

  • amber (she/her)@lemmygrad.mlEnglish
    1·
    1 year ago

    It would be nice if that was an option. I’ve just got the page zoomed in to 150% right now and it’s pretty comfortable on my laptop monitor, but on a full size desktop monitor I feel like the text would be a little large.

  • nachtigall@feddit.deEnglish
    1·
    1 year ago

    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.

    • Vorthas@lemmy.mlOPEnglish
      1·
      1 year ago

      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.

      • Neuromancer@lemmy.mlEnglish
        2·
        1 year ago

        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.

        • Vorthas@lemmy.mlOPEnglish
          1·
          1 year ago

          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.

      • nachtigall@feddit.deEnglish
        1·
        1 year ago

        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 😄

        • Vorthas@lemmy.mlOPEnglish
          2·
          1 year ago

          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;
}