【semantic-ui】レスポンシブなCSS設定ができない

Question

実現したいこと

Railsのテンプレートを、レスポンシブ対応にしたい
CSSフレームワーク semantic-uiを使って実現したい

問題点

公式サイトの通りにコードを書いても、一切レスポンシブにならない
https://semantic-ui.com/examples/responsive.html

※gemファイルは、導入記事などを参考に、必要とされるものは全てインストールし、
(参考： https://qiita.com/yuta-ushijima/items/688eb1b7587e28883ee0 ）
application.scssに
```
@import "semantic-ui";

と記述済み。semantic-uiが提供するその他のformレイアウトやアイコンなどは正常に表示されている。

# 例

以下のコードは、公式サイトから抜粋したものです。
PC画面くらいの画面幅だと、
[Content]   [Content]
[Content]   [Content]
[Content]   [Content]

といったレイアウトで、画面幅を狭めると
[Content]
[Content]
[Content]
[Content]
[Content]
[Content]
と、中央ぞろえの縦一列にレイアウトが変わります。

<div class="ui three column doubling stackable grid"> <div class="column"> <div class="ui segment">Content</div> </div> <div class="column"> <div class="ui segment">Content</div> </div> <div class="column"> <div class="ui segment">Content</div> </div> <div class="column"> <div class="ui segment">Content</div> </div> <div class="column"> <div class="ui segment">Content</div> </div> <div class="column"> <div class="ui segment">Content</div> </div> </div> ```

hoge.html.erbに、上記のコードをそのまま転記していますが、全くレスポンシブになりません。
画面幅を狭めても、１列に２つ並んだままです。
先述のように、semantic-uiの他のレイアウトはエラーなく利用できているので、何が原因なのか全く分からない状態です。

公式サイトにRailsでの利用方法の情報もなく、困っております。知見がお有りの方、環境設定の情報や、上記情報についてのご指摘など、なんでもよいので、どうぞよろしくお願いいたします。

Comments

[m.ts10806]

まず、モック作ってみては？

[m.ts10806]

それにCSS読み込んだ後はHTMLとCSSの話なのでRailsは関係ありません。

Answer 1

<header>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
</header>

の記載をしていなかったことが原因でした…。