Registering assets for mobile and desktop - making site responsive

Development

AI-generated summary

Users are discussing how to make a Discourse site responsive by registering mobile and desktop-specific stylesheets. Tech_Domain attempted to register separate stylesheets for mobile and desktop, but found that the last stylesheet registered overrides the previous ones.

vinothkannans suggested adding :desktop and :mobile parameters to the register_asset method to specify the target device type. However, Tech_Domain reported that this approach did not work, and nstoecki42 also faced a similar issue with loading stylesheets in their markdown plugin. The availability of :desktop and :mobile variables in the plugin.rb file is questioned, and it is unclear how to effectively control which stylesheet is applicable for different devices.

1

I am trying to register mobile specific stylesheet and desktop specific stylesheet.
But the discourse always takes the stylesheet which is registered last.

For example in plugin.rb file

# General change
register_asset "stylesheets/topiclist.scss"

# Desktop change
register_asset "stylesheets/desktop/topiclist.scss"

# Mobile change
register_asset "stylesheets/mobile/topiclist.scss"

Here the mobile stylesheet will override the previous two.

If I change the order, and keep the desktop stylesheet last, then it will override the previous ones.

So how do you make it responsive? Do we have to write the media queries ourselves, or placing the stylesheet in specific folders ( mobile, desktop etc) should make it work?

2

The correct code should be like below

# General change
register_asset "stylesheets/topiclist.scss"

# Desktop change
register_asset "stylesheets/desktop/topiclist.scss", :desktop

# Mobile change
register_asset "stylesheets/mobile/topiclist.scss", :mobile
3

@vinothkannans Thanks for answer.
But I had tried this after searching github repository. It didnt work for me, as the result was same as before.

I also tried another variation from this repo

register_asset('stylesheets/topiclist.scss', :desktop)
But this too didnt work.

I do not know Ruby very well, are the :desktop and :mobile variables available in plugin.rb file which control which stylesheet should be applicable?

4

I have the same issue with my markdown plugin. I tried:

register_css <<CSS
[...]
CSS

as well as

register_asset('stylesheets/decoration.scss')

but the Stylesheets seems not to be loaded!

Normally the Stylesheet Controlls :desktop, :mobile and :all are applicable!