Skip to content

ineffecient use of space on mobile

Solved Customisation
  • Hi @phenomlab ,

    When I access these pages that show posts on mobile:

    /posts
    /best
    /controversial

    I see something like this:
    Screen Shot 2022-05-12 at 1.11.28 PM.png

    This is how it looks on default. Our forum is the same, NodeBB community forum is the same…

    Although this page design does not bother me on desktop, I feel on mobile ~40% of the page is wasted for space…

    1. I wonder your opinion about this.

    2. Do you think these pages can be re-designed with CSS codes?

    I thought something like this, as in the topics… so, the blue line and avatar goes to the right side edge… username comes next to avatar, date goes to the left side… And of course “the post area” will be expanded to whole page…

    Screen Shot 2022-05-12 at 1.11.28 PM copy.jpg

  • @crazycells I knew that was coming 😄 - here it is

    @media (max-width: 767px) {
    .posts-list .posts-list-item {
        width: auto;
    }
    .posts-list .posts-list-item .post-body {
        border-right: none !important;
        width: 100%;
    }
    .posts-list .posts-list-item .post-info {
        position: revert;
        left: 0px;
        width: 500px;
    }
    .posts-list .posts-list-item .post-info .post-author {
        max-width: none !important;
        display: flex;
    }
    .posts-list .posts-list-item .post-info .post-author span {
        margin-left: 10px;
    }
    }
    

    Some other adjustments to get even more estate on mobile (30px either side) - your tastes may vary

    @media (max-width: 767px) {
    .posts-list .posts-list-item {
        width: auto;
    }
    .posts-list .posts-list-item .post-info {
        position: revert;
        left: 0px;
        width: 100%;
        margin-left: 15px;
    }
    .posts-list .posts-list-item .post-info .post-author {
        max-width: none !important;
        display: flex;
    }
    .posts-list .posts-list-item .post-body {
        border-right: none !important;
        width: 100%;
    }
    .posts-list .posts-list-item .post-info .post-author span {
        margin-left: 10px;
    }
    }
    

    The second CSS block gives you this

    1a9607f4-c011-4521-ba7b-e1b5fe44a045-image.png

    A final note that this of course does not include the colour scheme. This is from “Midnight” - a new theme I’ve developed in DEV which is almost ready for release, but has a few bugs I need to iron out first. I’ll publish a blog post on this new theme set soon.

  • @crazycells Funny you should mention that ! I was looking at this in my DEV environment yesterday and decided to alter the layout a bit

    bae79dbc-d2ef-4ceb-b25b-1bbcc24561bd-image.png

    My personal thoughts are that this looks much better and is easier to read 🙂

  • @phenomlab said in ineffecient use of space on mobile:

    @crazycells Funny you should mention that ! I was looking at this in my DEV environment yesterday and decided to alter the layout a bit

    lol, let’s say “great minds think alike” 😄

  • @phenomlab yes, I think this is definitely way better than the current form…

    Is this all CSS? or have you changed the codes in files as well?

  • @crazycells It’s all CSS !

  • @phenomlab said in ineffecient use of space on mobile:

    @crazycells It’s all CSS !

    great. Can you please share it when it is ready? I am looking forward to it.

    I have realized this recently, after using “/best-posts” plugin… it is very hard to follow these posts on mobile…

  • @crazycells I knew that was coming 😄 - here it is

    @media (max-width: 767px) {
    .posts-list .posts-list-item {
        width: auto;
    }
    .posts-list .posts-list-item .post-body {
        border-right: none !important;
        width: 100%;
    }
    .posts-list .posts-list-item .post-info {
        position: revert;
        left: 0px;
        width: 500px;
    }
    .posts-list .posts-list-item .post-info .post-author {
        max-width: none !important;
        display: flex;
    }
    .posts-list .posts-list-item .post-info .post-author span {
        margin-left: 10px;
    }
    }
    

    Some other adjustments to get even more estate on mobile (30px either side) - your tastes may vary

    @media (max-width: 767px) {
    .posts-list .posts-list-item {
        width: auto;
    }
    .posts-list .posts-list-item .post-info {
        position: revert;
        left: 0px;
        width: 100%;
        margin-left: 15px;
    }
    .posts-list .posts-list-item .post-info .post-author {
        max-width: none !important;
        display: flex;
    }
    .posts-list .posts-list-item .post-body {
        border-right: none !important;
        width: 100%;
    }
    .posts-list .posts-list-item .post-info .post-author span {
        margin-left: 10px;
    }
    }
    

    The second CSS block gives you this

    1a9607f4-c011-4521-ba7b-e1b5fe44a045-image.png

    A final note that this of course does not include the colour scheme. This is from “Midnight” - a new theme I’ve developed in DEV which is almost ready for release, but has a few bugs I need to iron out first. I’ll publish a blog post on this new theme set soon.

  • @phenomlab said in ineffecient use of space on mobile:

    @crazycells I knew that was coming - here it is

    lol of course 😄

    Thanks a lot. It is definitely much better than the previous version…

    Since we have not adapted posts as boxes yet, I would like to separate the posts by a line from edge to edge… but not sure what classes should I use? I know the code will be something like this:

    .posts-list .posts-list-item .post-info {
    border-bottom: 1px solid #000;
    }
    

    but this does not extend from edge to edge. Do you have any other suggestions to separate posts from each other?

    Actually, it looks good when I add:

        margin-bottom: 35px;
    

    but, I wanted to ask in case you have a better solution.

  • @crazycells This is fine. The generally accepted way of adding a space between elements is to use margin so you’re on the right track.

  • phenomlabundefined phenomlab has marked this topic as solved on
  • crazycellsundefined crazycells referenced this topic on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

  • 7 Votes
    8 Posts
    157 Views

    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check.

    EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right…

    .bottombar-nav { padding: 0px !important; }

    I’ve removed this so it reflects stock Harmony.

  • 1 Votes
    1 Posts
    275 Views
    No one has replied
  • Email validation NodeBB

    Bugs
    21
    3 Votes
    21 Posts
    873 Views

    @Panda said in Email validation NodeBB:

    Did you configure that as a custom change to the usual quote icon. How do you do that?
    I notice on NodeBB site its a solid blue quotes

    Yes, I changed it. NodeBB by default users the free font awesome library whereas I use the pro (paid) version SDK have access to a wider set of icons, and at different thicknesses etc. The change of colour is just simple CSS.

  • 3 Votes
    9 Posts
    405 Views

    The real issue here is that most people consider forums to be “dead” in the sense that nobody uses them anymore, and social media groups have taken their place. Their once dominant stance in the 90’s and early 00’s will never be experienced again, but having said that, there are a number of forums that did in fact survive the social media onslaught, and still enjoy a large user base.

    Forums tend to be niche. One that immediately sticks out is Reddit - despite looking like it was designed in the 80s, it still has an enormous user base. Another is Stack Overflow, which needs no introduction. The key to any forum is the content it offers, and the more people whom contribute in terms of posting , the more popular and widely respected it becomes as a reliable source of information.

    Forums are still intensely popular with gamers, alongside those that offer tips on hacking etc.

  • 6 Votes
    10 Posts
    381 Views

    @phenomlab yes it caused a problem for mobile users.
    thank you for helping …

  • 11 Votes
    23 Posts
    2k Views

    @DownPW No issues. Thanks to the Google Chrome “bug”, it does have some restrictions, but works fine other than that. I have an odd issue where it doesn’t work on Firefox mobile, but works fine on Firefox desktop.

  • CSS codes for fa-info icon

    Solved Customisation
    9
    6 Votes
    9 Posts
    436 Views

    I have just figured it out…

    it can be targeted with text-decoration-color:

    I was mistakenly using color

  • Display tweets in widget [NodeBB]

    Solved Customisation
    29
    4 Votes
    29 Posts
    2k Views

    @phenomlab brilliant, many thanks Mark 😁