サイトアイコン 成功者への道

WordPress スマホで表示した時に画像の回り込みを回避するには?

画像の回り込みとは?

画像に文字を回り込ませて表示することはよくあると思います。
こんな感じ。

これは、画像に文字を回り込ませたときの例です。

 

スマホでの回り込み表示は?

スマホで表示した時にこんな風になってしまって困ることありませんか?

 

解決策

俗に言うレスポンシブ対応というやつです。

下記をStyleSheetに追記するとこんな風になります。

 

css:

@media only screen and (max-width: 413px) {
img.alignright {
padding: 0 0 10px 0;
margin: 0 auto;
display: block;
}

img.alignleft {
padding: 0 0 10px 0;
margin: 0 auto;
display: block;
}
.alignright {
float: none;
}

.alignleft {
float: none;
}
}

 

モバイルバージョンを終了