レスポンシブしたいのですがこのコードでできないですけど何が間違っているのでしょうか？

レスポンシブしたいのですがこのコードできないですけど何が間違っているのでしょうか？

今webページを制作していてレスポンシブしようとおもい。お手本をみながらコードをうっていたのですがお手本と同じはずなのになぜかできない。

発生している問題・エラーメッセージ

レルポンシブできない

該当のソースコード

HTml
1<nav class="top-nav">
2      <ul id="menu">
3        <li class="hamburger"><a href="menu"><i class="fa fa-bars"></i></a></li>
4        <li><a href="#">会社名</a></li>
5        <li><a href="#">ホーム</a></li>
6        <li><a href="#">事業案内</a></li>
7        <li><a href="#">採用情報</a></li>
8        <li><a href="#">お問い合わせ</a></li>
9      </ul>
10    </nav>

css
1nav{
2  background-color: #FAF0E6;
3  color: black;
4}
5
6nav ul{
7  display: flex;
8  flex-float: row;
9  margin: 0;
10  padding: 6px;
11  list-style-type: none;
12}
13
14nav li.hamburger{
15  align-self: flex-end;
16}
17
18nav a{
19  display: block;
20  border-radius: 4px;
21  padding: 12px 24px;
22  color: black;
23  text-decoration: none;
24}
25
26nav li a:hover{
27  background-image: url(img/logo1.jpg);
28}
29
30@media only screen and(min-width:550px){
31  nav ul{
32    display: flex;
33    flex-flow: row;
34    margin: 0;
35    padding: 6px;
36    list-style-type: none;
37  }
38  nav li.hamburger{
39    display: none;
40  }
41}

###こうしたい

###現在

試したこと

お手本をコピーしてはってみたらできました

gogoweb_ikeda

2020/08/03 03:02

nav ulのスタイルが通常時も550px以上の時も同じに見えますがこれは正しいですか？

退会済みユーザー

2020/08/03 04:30

すみません。。そこが間違いでしたありがとうございます

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

回答2件

CSS
1nav ul{
2  display: flex;
3  /*flex-float: row; ← ここが問題 */
4  margin: 0;
5  padding: 6px;
6  list-style-type: none;
7}

投稿2020/08/03 04:38

kei344

総合スコア69606

kei344

2020/08/03 04:39

あ、解決してた。

退会済みユーザー

2020/08/03 05:18

すみません^^;誤字でした。

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

ベストアンサー

cssの方に誤字がありました。
直し↓

css
1nav{
2  background-color: #FAF0E6;
3  color: black;
4}
5
6nav ul{
7  display: flex;
8  flex-direction: column;
9  margin: 0;
10  padding: 6px;
11  list-style-type: none;
12}
13
14nav li.hamburger{
15  align-self: flex-end;
16}
17
18nav a{
19  display: block;
20  border-radius: 4px;
21  padding: 12px 24px;
22  color: black;
23  text-decoration: none;
24}
25
26nav li a:hover{
27  background-image: url(img/logo1.jpg);
28}
29
30@media only screen and (min-width: 550px){
31  nav ul{
32    display: flex;
33    flex-direction: row;
34    margin: 0;
35    padding: 6px;
36    list-style-type: none;
37  }
38  nav li.hamburger{
39    display: none;
40  }
41}