質問概要

Materializeの、containerクラスを持ったDIVに対して、
スマートフォン表示のときだけcontainerクラスを解除（width:100%状態？）したい。

質問

Materializeの、containerクラスを持ったDIVに対して、
スマートフォン表示のときだけcontainerクラスを解除（width:100%状態？）したいのですが、方法が分かりません。

lang
1@media screen and ( max-width:479px ){
2    .container{
3        width: 100% !important;
4    }
5}

のようにすると、要素が画面の外にはみ出てしまいます。
これ以外の方法が思いつきませんでしたので、お知恵をお貸しいただけると幸いです。

よろしくお願いいたします。

kei344

2017/04/29 15:42

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

行動規範の内容に同意します

回答1件

的外れかもしれませんが、以下のように記述するとどうでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
7    <title>タイトル</title>
8    <style type="text/css">
9        @media screen and (max-width: 479px) {
10            .container, .container .row {
11                width: 100%;
12                margin-left: 0;
13                margin-right: 0;
14            }
15
16            .row .col {
17                padding: 0;
18            }
19        }
20
21        .grid-example {
22            border: 1px solid #eee;
23            margin: 7px 0;
24            text-align: center;
25            line-height: 50px;
26            font-size: 28px;
27            background-color: tomato;
28            color: white;
29            padding: 0;
30        }
31    </style>
32</head>
33<body>
34<div class="container">
35    <div class="row">
36        <div class="col s1 grid-example">
37            <span class="flow-text">1</span>
38        </div>
39        <div class="col s1 grid-example">
40            <span class="flow-text">2</span>
41        </div>
42        <div class="col s1 grid-example">
43            <span class="flow-text">3</span>
44        </div>
45        <div class="col s1 grid-example">
46            <span class="flow-text">4</span>
47        </div>
48        <div class="col s1 grid-example">
49            <span class="flow-text">5</span>
50        </div>
51        <div class="col s1 grid-example">
52            <span class="flow-text">6</span>
53        </div>
54        <div class="col s1 grid-example">
55            <span class="flow-text">7</span>
56        </div>
57        <div class="col s1 grid-example">
58            <span class="flow-text">8</span>
59        </div>
60        <div class="col s1 grid-example">
61            <span class="flow-text">9</span>
62        </div>
63        <div class="col s1 grid-example">
64            <span class="flow-text">10</span>
65        </div>
66        <div class="col s1 grid-example">
67            <span class="flow-text">11</span>
68        </div>
69        <div class="col s1 grid-example">
70            <span class="flow-text">12</span>
71        </div>
72    </div>
73</div>
74<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
75<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
76</body>
77</html>