Bootstrapでスマホだけ余白を無くして画面いっぱいに表示するためのCSS

どうもpei(@pei_babo)です。

みんな大好きBootstrapですが、スマートフォンで見る時はちょっと画面の左右の余白が大きすぎる気がしますよね。
そもそも画面が小さいスマートフォンですから、出来る限り広く使いたいものです。
ただPCは余白があった方がスッキリすると思うので、今回はスマホだけ対応させるCSSです。

ちなみにやりたいイメージはこんな感じです。

bootstrap-smartphone-fix-1

プログラミングやWordPressを習得するのに一番近道な方法とは?

 

Bootstrapでスマホだけ余白を無くすCSS

それではCCSを載せますね。

このCSSをBootstrap読み込みより後に設置すればOKです。

すると、
bootstrap-smartphone-fix-2
このようにスマホだけ画面いっぱいに広がりますよ。

小ネタですが、誰かのお役に立てれば嬉しいです。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください