スマホサイト: h2見出しが横にはみでる
MEMO
状況:
PC用サイトのHPをもとに、スマホサイト作成時、
body全体を width:100% にしたが、
h2見出しが横にはみ出る
理由:
body(id="wrapper")全体は、100%にしたが、以下が理由のようだ。
1.bodyの中をヘッダー、コンテンツ、フッターと分けている
2.コンテンツをmainwrapとし、それをさらにmainwrap-left、mainwrap-rightに分けている
3.左サイドバーであるmainwrap-leftを非表示にした後、
コンテンツ全体(id="mainwrap")に対し、width=100%にする必要があったようだ。
予想だけど・・・。
解決方法:
/*■■■ 小画面:body(wrapper)に下記設定*/
/* mainwrapは別途設定必要あり*/
@media (max-width: 767px){
#wrapper{
width: 100%;
}
}
/*■■■ 小画面:画面サイズになるようにmainwrapに幅設定する*/
@media (max-width: 767px){
#mainwrap{
width: 100%;
}
}
スマホ下部に横スクロールバーがでてしまう(レスポンシブデザインで右側に余白ができる)
MEMO
状況:
スマホ用サイト(レスポンシブデザイン)作成時に、
下部に横スクロールバーが表示される。
画面内にサイトは収まっているのに、右側に余白・空欄が表示されている状況。
理由:
不明のため、下記サイトを参照させていただいた。ありがとうございました!
[:a]横スクロールバーを消したい!【HTML+CSS】 | AKANEIRO.me
解決方法:
以下と最後の行に入力したら、余白が消えました。めでたしめでたし。
はじめます
ブログスタートします。