[ 解決済 ] モバイル時の画像のテキスト回り込みを解除したい
[ 解決済 ] モバイル時の画像のテキスト回り込みを解除したい
- このトピックには2件の返信、2人の参加者があり、最後に
により2年、 6ヶ月前に更新されました。
-
投稿
-
■ WordPress のバージョン
WordPress 5.9.3■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
lightning 14.20.3■ Pro Unit のバージョン
G3 Pro Unit 0.19.0■ スキンの種類
その他■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。■ プラグインの種類・バージョン
G3 Pro Unit 0.19.0■ 期待する動作
お世話になります。
固定・投稿ページでタブレット以下の画面サイズの際に、ブロック「outer」内のテキストの数行が画像に回り込んでしまいます。それを解除したいことです。■ 自分で試した事
2018/11/22にlightning Proにて同じ質問で回答がありましたので、その回答のCSSをページの追加CSSに入力してみましたが結果は同じでした。おそらくテーマ、ブロックが違うからと思います。初歩的な質問で申し訳ありませんがよろしくお願いします。
以下が回答のあった追加CSSです。
@media (max-width: 767px){
.alignleft, img.alignleft{
float:none;
display:block;
margin: auto;
}
.alignright, img.alignright{
float:none;
display:block;
margin: auto;
}
}■ 症状が発生するブラウザ
Edge■ 実際の症状
該当URLのTOPページの「学友会からのお知らせ」の画像にテキストの数行が画像の右側に回り込んでしまいます。■ その他特記事項
特にありません。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
確認しましたところ、画像を左寄せ、右寄せで配置されているので、できればカラムブロックなどのブロックで、組み直してあげると良いのかなと思います。
が、一旦は現状の状態で、指定した画像のみスマホサイズで幅を100%にするCSSを書きましたので、参考にしてください。【01】編集画面から、スマホサイズ時に幅100%にしたい画像を選択して、「高度な設定」から追加 CSS クラスに
img-sm-width-fullと入れます。（添付画像参照）【02】以下のCSSを追加CSSなどに追記してください。
@media (max-width: 575.98px) { .img-sm-width-full figure, .img-sm-width-full figure img{ width:100%; } }
- このトピックに返信するにはログインが必要です。
