tablet view on desktop

[deleted]

I want to set tablet view default on desktop, is it possible?

meetdilip

Choose " Tags " instead of " All Discussions "

[deleted]

meetdilip It's not. I want to set tablet views on desktop browser like that.

clarkwinkelmann

[deleted] the Flarum layout is responsive and made using CSS media queries.

If you want the "mobile" layout even with a larger screen width, you'll have to alter the core CSS and remove those media queries as well as the style specific to larger screens. This might be achievable by only adding CSS in the "custom CSS" of Flarum. but that might be a lot of CSS because it would need to override all the style that applies to wide screens.

There might also be some javascript that has hard-coded breakpoints for the menu and navigation layouts.

The full "mobile" layout won't look very good on desktop and might be impractical. Maybe there is only a specific thing you'd like to change the style of ?

[deleted]

in fact there is. i don't want to use drow down menu, i tried to remove it completely but that times I couldn't set padding the discussion views. i think default tablet view is very clean and it's exactly what I want. is there an easy way like changing the desktop resolution in core css?

clarkwinkelmann

[deleted] the CSS breakpoints are defined here https://github.com/flarum/core/blob/v0.1.0-beta.9/less/common/variables.less#L116

It's possible to overwrite the @screen-tablet and @screen-desktop variables from the custom CSS, but it doesn't seem to be enough. When I do it, the navigation breaks (the links are on top of the content and are invisible). So I think I was right saying there's some javascript somewhere that needs an update as well.

Pollux

[deleted]

Do you want to do this only for yourself? In this case, it would be enough to increase the fontsize within your browser e.g. using the shortcut cmd + on MacOS or ctrl + on Windows. Also reducing the size of your browser window would work in that direction.

Afaik, there is no way to simulate this behaviour easily with simple adjustments in CSS. If you want this change for all visitors of your forum, you'd have to change a lot of CSS rules (and likely more) regarding the reponsive design, as @clarkwinkelmann already pointed out.

The <meta name="viewport" ...> declaration was introduced to handle, how mobile devices should scale the content of websites to adapt to the reduced screen estate, but I have never tried whether this can be used on desktop computers to emulate a mobile device.

[deleted]

@Pollux @clarkwinkelmann i want do that view for visitors, i think it is better and more remarkable. I understand it's not simple process cannot be solved with css tricks. so default desktop theme can be likened to the tablet theme by editing the css?