質問: グローバルメニューを記事幅に合わせるやり方を教えていただきたいです。 現在デザイン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から見た時の図もそうなのですがデザインをレスポンシブした際に 大幅にずれているのでその直し方を教えていただきたいです(;_;) なんとか携帯画面に収めたいのですが可能でしょうか? よろしくお願いいたします。
回答: これでどうでしょうか。 #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で最大幅を追加でレスポンシブになると思います。