how to enable mobile view (hide left menu) on desktop

[rezad1393]

I remember I could use custom-css extension for this but after a bug I had to remove that extension and now that I re-added it, I forgot what I added.

can someone guide me with this?

[Frenzie]

Using JS might be more elegant. You can probably change it with JS, see CSSMediaRule.

As for pure CSS, I suppose you mean you simply copied everything that's covered under the relevant media query:

/*=== MOBILE */
/*===========*/

@media (max-width: 840px) {
    /* everything that is written here */
}

Or at least I can't really think of any other way to do that with just CSS.

[rezad1393]

I remember using that css extension which made it so that mobile view was used at 100% zoom, unlike without it which is mobile view is used at 160%

I remember what I pasted in that extension config making mobile view to be forced.

coping the mobile css doenst make it be forced does it?
because I can see it is already loaded in firefox web dev tool.
I think that css just make the width that mobile rules apply different.

[rezad1393]

OK I did it.
this way.

I copied the mobile part from themes/base-theme/frss.css
and then changed the
@media (max-width: 840px)
to
@media (max-width: 1400px)

now at 100% I am in mobile view and at 90% I am in desktop view.

I am not a web dev so,
sorry if that was what you meant from start.

[Frenzie]

That's what I meant, yes. But the other thing I meant is that it might be more easily maintainable to do something like this using JS instead:

    for (let i = 0; i < document.styleSheets.length; i++) {
        const sheet = document.styleSheets[i];

        try {
            for (let j = 0; j < sheet.cssRules.length; j++) {
                const rule = sheet.cssRules[j];

                if (rule instanceof CSSMediaRule && rule.media.mediaText === '(max-width: 840px)') {
                    rule.media.mediaText = '(max-width: 1500px)';
                }
            }
        } catch (e) {
            console.warn(`Could not access rules for stylesheet: ${sheet.href}`);
        }
    }

[rezad1393]

btw how can I make it so in in mobile view the feed title (not post title) are still shown?

[Frenzie]

Something along these lines at the bottom.

@media (max-width: 1400px) {
  .flux_header .item.website {
    width: 200px;
  }
  .flux_header .item.website span, .item.date, .day .date, .dropdown-menu > .no-mobile, .no-mobile {
    display: initial;
  }
}