[ 解決済 ] モバイル時の画像のテキスト回り込みを解除したい

[山添栄造]

■ 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ページの「学友会からのお知らせ」の画像にテキストの数行が画像の右側に回り込んでしまいます。

■ その他特記事項
特にありません。

Attachments:

You must be logged in to view attached files.

---

該当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%;
}
}

• この返信は1年、 12ヶ月前にうなこが編集しました。
• この返信は1年、 12ヶ月前にうなこが編集しました。

Attachments:

You must be logged in to view attached files.

[山添栄造]

うなこ様
モバイル時の画像のテキスト回り込み解除の件、ご回答を有難うございます。
「高度な設定」から追加 CSS クラスにimg-sm-width-fullと入れ、ご指示のCSSを追加CSSに追記し、画像サイズの変更やモバイルの幅を変えてやってみましたら、問題なくテキストの回り込みの解除が出来ました。
つたない知識でネット検索して調べたりしてやってみましたが、うまくいかず困っていましたが、これでスッキリしました。改めてお礼申し上げます。

[投稿者]

投稿