レスポンシブ(スマホ)時、paddingで高さを指定した背景画像の高さ再調整

backgroundに背景画像を設定する場合、paddingにて高さ調節をしているかと思う。

ただ、こういうケースは当然PCで調節を行っているため、レスポンシブ時にはひどいことになる。pannding単位をVHなどにし一気にレスポンシブも見据えて調節する方法もあるが、実際にはなかなか良い塩梅にはならない。

そういったときはメディアクエリにて一旦paddingをクリアし、再度高さを指定してあげれば解決する

CSS

※クラス指定だと効かないケースがあったため、ID指定に。paddingを入れている要素に指定してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です