-1

https://y-sasakik.github.io/web/web3/

上のサイトでスマホ時に横幅いっぱいにならず、困っています。

どこを変えれば直りますか?
ソースは検証ツールまたは GitHub のリポジトリを参照してください。

https://github.com/y-sasakik/web/tree/main/web3

(追記)
スマホ時にコンテンツ幅を画面いっぱいにしたいということです。例えば「スクールの概要」あたりはスマホ時に横スクロールできてしまい、切れたようになってしまいます。これをコンテンツ幅を画面サイズにぴったり合うようにしたいといいますか、横スクロールしないようにしたいです。
説明下手ですいません。よろしくお願いします。

1
  • こちらで確認したところ、少なくともレイアウト全体は横幅いっぱいになっており、質問内容は満たしているようです。一部を横幅いっぱいにしたいのでしょうか?また、特定の端末や横幅設定では期待したレイアウトが得られないのでしょうか?より詳細に質問を記載すると回答が得られやすくなります。
    – PicoSushi
    Commented 2022年8月16日 5:42

1 件の回答 1

1

.student dd要素に対するcssでwidth:100%padding:20pxが指定されているので、パディングの分だけ画面サイズからはみ出してしまっているのが原因かと思います。

.student ddに対してbox-sizing: border-box;を指定してみてください。これによって、widthで指定した数値の内側にパディングが設定されるようになります。

1
  • きれいになりました。 ありがとうございます
    – sasakik
    Commented 2022年8月18日 9:28

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。