グローバルメニューを記事幅に合わせるやり方を教えていただきたいです。

現在デザインCSSが
#top-editarea {
width: 980px !important; /**記事とサイドバーの幅**/
margin:0 auto;
}
#global ul{
list-style: none;
width: 980px;
margin: 0 auto;
text-align: center;
font-family: 'Futura', 'Arial Black', sans-serif;
letter-spacing: 0.1em;
background-color: #535353;
}
#global ul li{
display: inline-block;
}
#global ul li a{
display: inline-block;
padding: 0.6em 1.2em;
color: #fff;
text-decoration: none;
transition: color .3s ease-out;
}
#global ul li a:hover{
color: #fc9d9d; /**触れた時の色**/
}

以上を入力しています。
PCから見た時の図もそうなのですがデザインをレスポンシブした際に
大幅にずれているのでその直し方を教えていただきたいです(;_;)
なんとか携帯画面に収めたいのですが可能でしょうか?

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

http://www.hutaeninaritai.com/

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2017/03/06 01:52:18
  • 終了:2017/03/08 18:45:10

ベストアンサー

id:nomaharu2013 No.1

のま回答回数1ベストアンサー獲得回数12017/03/06 07:26:34

ポイント500pt

これでどうでしょうか。
#top-editarea {
max-width: 900px !important; /**記事とサイドバーの幅**/
width:100%;
margin:0 auto;
}
#global ul{
list-style: none;
width:100%;
max-width: 1000px;
padding:0 !important;
margin: 0 auto;
text-align: center;
font-family: 'Futura', 'Arial Black', sans-serif;
letter-spacing: 0.1em;
background-color: #00000000;
}

widthを100%、max-widthで最大幅を追加でレスポンシブになると思います。

他3件のコメントを見る
id:nomaharu2013

どこでも大丈夫ですよ(^^)
強いていうなら、わかりやすいように、#global ul{....}の真下に入れるのがいいですね。

2017/03/07 00:49:07
id:bsksbsks

ありがとうございました(*´▽`*)参考にさせていただきます!

2017/03/08 18:44:41

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません