画面幅が広いときに Outer ブロックの背景画像の上下が欠ける問題の対策例

Outer ブロックに背景画像を設定したときに、画面幅が広くなるにつれて画像の上下が欠けるのが気になりますよね。

対策の一例として、画面幅が 1800px 以上になったときに Outer ブロックがコンテナの幅になるように、以下の CSS を追加してみます。

@media (min-width: 1800px) {

.vk_outer-width-full {
margin-left: 0;
margin-right: 0;
}

.vk_outer-width-full.vk_outer-paddingLR-none {
padding-left: 0;
padding-right: 0;
}

}

上記の CSS を設定すると以下のようになります。

上記の CSS のままだと設定がすべての全幅 Outer ブロックに適用されますので、特定のブロックだけに適用させるために Outer ブロックに 追加 CSS クラス を指定して、CSS を以下のようにするとよいです。

@media (min-width: 1800px) {

.vk_outer-width-full.width-change {
margin-left: 0;
margin-right: 0;
}

.vk_outer-width-full.width-change.vk_outer-paddingLR-none {
padding-left: 0;
padding-right: 0;
}

}

上記の例では width-change が Outer ブロックに指定した 追加 CSS クラス です。

【参考】Outer ブロックの設定は以下のようになっています。

余白 (左右)	コンテンツエリアに合わせる
余白 (上下)	標準の余白を使用