Hidden links for some screen width

[ineol]

Page(s) Affected

Community page

What needs to be fixed?

For some widths, the links to the forums are not visible, see the screenshot. A few pixels wider or narrower makes them appear. This seems to happen only happens only for a width of 951 pixels.

[XAMPPRocky]

Thank you for your issue! Can you give a specific device that you're using? The website isn't designed to work at every possible width only ones that match common devices.

[ineol]

It's a 14inch laptop with the screen divided equally in two.

This fail exactly at the point where the layout goes from three columns to one column.

[ineol]

Forgot to say, this is under firefox 76.

[XAMPPRocky]

Hmm, well unless there's a concrete suggestion of what change to make I'm not sure there's much that can be done. I wouldn't want to override the media breakpoints. It's definitely something to keep in mind when making other changes to the page though.

[ineol]

I don't know much about CSS, but adding the following to the CSS in Dev tools fixes it:

.dn-m {
    display: none;
}

@media screen and (min-width: 60em) {
    .dn-m {
        display: flex;
    }
}

I think the current setup is to hide div dn-l for max-width: 60em and hide div dn-m for min-width: 60em, and so both are hidden for width = 60em, which is a bug

I think it works better to show one and hide the other when a single of those conditions is met.

[XAMPPRocky]

Hmm, yeah I’m not really familiar with the current CSS framework.

[Fasani]

The framework is this: http://tachyons.io/docs/layout/display/

I can take this as I had to fix my other commit I did a while back, so I had to dive into the framework.

Basically it is a mobile-first framework so make changes on the small screen first then adapt larger. By this assume an element is visible on the small screen and add .dn .db-m to elements that should only be seen on larger screens. Those classes say hide this block always, except show it on medium or larger. The reason is you only really have 3 modifier classes to think about.

/*

   DISPLAY
   Docs: http://tachyons.io/docs/layout/display

   Base:
    d = display

   Modifiers:
    n     = none
    b     = block
    ib    = inline-block
    it    = inline-table
    t     = table
    tc    = table-cell
    t-row          = table-row
    t-columm       = table-column
    t-column-group = table-column-group

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/

[XAMPPRocky]

@Fasani I'm aware of the framework and the concepts behind it, I'm just not as experienced with it as I am with something like bootstrap, so I wouldn't feel comfortable trying to fix this by changing media queries. If you know how to fix this without adding another media query go ahead, I don't think I'd want to override it for a specific width.

[Fasani]

@XAMPPRocky Understood. I would agree. My guess would be at some point someone did some work and this side effect should be easy to fix without adding more css code. I will take a look to see what I can find. Thanks!