Registering assets for mobile and desktop - making site responsive

Dev
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
4 Likes
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

https://github.com/crowdint/reading-reviews/blob/73de8ee8c8f3fb41ada0cd83a092f346ece26c2a/plugins/emoji/plugin.rb

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!