カテゴリー:
モバイルデザイン
閲覧数:606 配信日:2016-01-01 18:36
サイト横幅が意図せず大きくなってしまう理由
A.アフィリエイト広告
B.改行しない
C.特定要素のwidthを固定指定
D.画像幅が大きい
A.アフィリエイト広告
468×60サイズ広告を使用すると、スマホレイアウトが崩れる
・スマホ専用サイズ「320x48」が用意されているので、切り替えて使用
B.改行しない
a.SyntaxHighlighter
・SyntaxHighlighterでソースがはみ出しちゃったときの対処法など
b.半角スペースや”/”が含まれない場合英文は改行されない
・折り返し有効化すれば良い
word-break: break-all;
/*長い行の折り返し有効化*/
div.status,h1{
word-break: break-all;
}
C.特定要素のwidthを固定指定
▼views/common/css/style-project-old.css
/*プルダウンフィルタリング*/
/*横*/
.chzn-select{
width:600px!important;
}
経緯
・MySQLデータを、プルダウングループ化表示したい
対応
・コメントアウト
D.画像幅が大きい
対応
・max-width指定
指定例
/* スマホドロワーメニュー非表示さけるため、画像横幅最大指定*/
div.status img {
max-width: 100%;
}