スマホviewのみ以下のCSSをメディアクエリで指定して適用するのも良いと思います。

.wp-block-image .alignleft {
	float: none;
}

でも、別のブロックを使ったほうがCSSを書かなくても良い分、楽な気もします。

かうたっくさん、いつもありがとうございます。

.wp-block-image .alignleft {
	float: none;
}

これは試してみたのですが、やはり回り込み解除にはなりませんでした。

PCのレスポンシブテストもスマホでも同様です。

でも、別のブロックを使ったほうがCSSを書かなくても良い分、楽な気もします。

これは例えばどのような書き方でしょうか？

希望する表示は

1. PCでは左に画像、右に文字を回り込ませる。
2. SPでは回り込みをせず、上に画像、下に文字が来るようにする。　

というものです。

これは試してみたのですが、やはり回り込み解除にはなりませんでした。

PCのレスポンシブテストもスマホでも同様です。

忘れてました。デベロッパーツールだとCSSの優先順位が強いのでそれでイケるんですが

head内のCSSの順位がブロックエディタのほうが強いんでした！
子テーマに書いた場合、そのあとに読み込まれるブロックエディタが上書きしてしまうのが原因だと思います。

今確認してないけどそういった認識って意味でして。

例えば#main半角スペースをはじめにつけて、メディアクエリ内で指定すれば解決するかと思われます。

解決した際、そのCSSを書いていただけたら、助かります！ ? ? ? 

それから。

希望する表示は

1. PCでは左に画像、右に文字を回り込ませる。
2. SPでは回り込みをせず、上に画像、下に文字が来るようにする。　

というものです。

こっちのほうですが、実際私も確認しないとコレですよ！っていえないんですが
他のブロックを確認するか、Cocoonのものであれば、2カラムなどを試して納得いく結果の表示になるかどうか。みたいな感じです。

忘れてました。デベロッパーツールだとCSSの優先順位が強いのでそれでイケるんですが

あ、それどっかで聞いたことがありました！

なので

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none !important;
}
}

ということで、!importantを付けて一応の解決はしました。
ありがとうございますっ！！<(_ _)>

ただ、スマホ表示で回り込み解除できたのは良いのですが、画像の右側に隙間が出来てしまいました。

Cocoonの2カラムを使用した場合、画像はスマホ画面幅になるのですが、画像ブロックで回り込みを解除した場合でも同様に画像をスマホ画面幅にすることは可能でしょうか？

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none;
}
}

ということで、!importantを付けて一応の解決はしました。

この件ですが、AMPを有効にされてる場合は、AMPからのアクセスでは表示が以前のままかもしれません？？？

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

#main .wp-block-image .alignleft {
float: none !important;
}
}

など、親要素。と言われるその領域を囲むタグのHTMLをの属性を指定したほうがぶなんかもしれません。※CSSありがとうございます！

それから

Cocoonの2カラムを使用した場合、画像はスマホ画面幅になるのですが、画像ブロックで回り込みを解除した場合でも同様に画像をスマホ画面幅にすることは可能でしょうか？

状況が分かりかねます。

チェックしたページ： https://lavinne.com/test/

万が一必要で必須であれば
実装していただいて様子を見せてください。

もしかしたら、別トピックを挙げていただけたら、他の人にも届くかもしれないです？ので質問の回答側の人で不足のためご協力お願いします！

かうたっくさん、別トピ等の件了解いたしました。

えっと、この後スマホでの回り込み解除については詳細を書きたいと思いますが、今回記載したテストURL　 https://lavinne.com/test/ 　ではスマホで回り込み解除できたのですが、同じCSSを指定しても本番用のURLでは回り込みが解除されませんでした。

ともにプラグインは入れていません。

違いがあるとすれば、Cocoon子テーマのバージョンが違ったので（テストURLはバージョンが古い）、今バージョンアップしているところです。

結果等、追ってご連絡致します<(_ _)>

#post-25487

 !importantの書き込みの件で、うまくいかなかったので再書き込み

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none !important;
}
}

ということで、!importantを付けて一応の解決はしました。

この件ですが、AMPを有効にされてる場合は、AMPからのアクセスでは表示が以前のままかもしれません？？？

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

#main .wp-block-image .alignleft {
float: none;
}
}

など、親要素。と言われるその領域を囲むタグのHTMLをの属性を指定したほうがぶなんかもしれません。※CSSありがとうございます！

かうたっくさん、別トピ等の件了解いたしました。

ありがとうございます！

えっと、この後スマホでの回り込み解除については詳細を書きたいと思いますが、今回記載したテストURL　  https://lavinne.com/test/  　ではスマホで回り込み解除できたのですが、同じCSSを指定しても本番用のURLでは回り込みが解除されませんでした。

ともにプラグインは入れていません。

同じCSSってどのことでしょうか？？

優先順位の話でしたら、上で書いた通りです。

何を試して何がむりだったか教えてください。

もうしわけないですけど、ちょっと意味が分からない状態です。どこのURLではへいきだったか。などありますか？全部チェックしきれませんけど

追記

マホで回り込み解除できたのですが、同じCSSを指定しても本番用のURLでは回り込みが解除されませんでした。

子テーマに書いたCSSに問題があるかと思われます。実際みてないので何とも言えません。※何もカスタマイズを行ってない状況であれば問題ない。って事ですので、そう思われます。

かうたっくさん、ありがとうございます。

この件ですが、AMPを有効にされてる場合は、AMPからのアクセスでは表示が以前のままかもしれません？？？

現在AMPはOFFにしておりますので、現段階ではこのままでいこうと思います。

子テーマに書いたCSSに問題があるかと思われます。実際みてないので何とも言えません。※何もカスタマイズを行ってない状況であれば問題ない。って事ですので、そう思われます。

子テーマのバージョンを揃えたり、なんだかんだしていたら同じ表示になりました。

まとめますと、

最初の質問は、テストURL https://lavinne.com/test/  2段目の画像がスマホ表示で回り込み解除が出来ないということでした。

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none ;
}
}

を記述しても反映されない・・・。

忘れてました。デベロッパーツールだとCSSの優先順位が強いのでそれでイケるんですが

というご助言を頂き、「!important」を追加。

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none !important;
}
}

すると、スマホで文章の回り込みが解除されました。

今回質問させて頂いた件は、テストURL（サイト）で公開させて頂きました。
現在未公開で作成中のサイトで、「スマホで回り込み解除」のCSS（テストURL同じもの）を記述したところ、回り込みが解除されず原因を調べていました。

両サイトともCocoonのバージョンを最新にするなど、考えられることをやりましたが、結果的には凡ミス（CSS記述ミス）だったようです。

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none !important;
}
}

と書くものを

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}
.wp-block-image .alignleft {
float: none !important;
}

と記述していたようです。

結果的にスマホにおける回り込み解除は「float: none !important」を付けることによって解決することが分かりました。

かうたっくさんが言われるように、AMPを有効にした場合は追加の記述が必要なのだと思います。

最後に、スマホ表示で回り込み解除をした場合、画像の右に余白が出てしまう対処については別トピで質問させて頂きたいと思います。

あ、長くなりましたが、文章って難しいですね。
他のトピを見ているとき、「それは何を指しているの？」と思うことが多々あるので、結構気を付けて書き込んだつもりでしたが、誰が見ても分かる文章を心掛けないといけないと改めて思いました。

日々進化を続けるCocoonとそこに尽力されるわいひらさん。
そしてこのフォーラムで、惜しげもなく助言してくださるみなさんに感謝いたします<(_ _)>

現在AMPはOFFにしておりますので、現段階ではこのままでいこうと思います。

そうなんですね。検索から流入した人にも言えるので書き込みました。それだけではなく冒頭案内にある、Cocoon設定・テーマ情報タブの情報すらないで、ついでに書き込んだだけです。

冒頭案内とは以下引用の環境情報の部分です❦

書き込みの前に以下の3点をご確認ください。

1. 1つのトピックにつき1つの質問を書き込んでください
2. 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

最初の質問は、テストURL  https://lavinne.com/test/   2段目の画像がスマホ表示で回り込み解除が出来ないということでした。

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

.wp-block-image .alignleft {
float: none ;
}
}

を記述しても反映されない・・・。

これについては、優先順位問題。と書いた通りだと思われます。

あとですけど。。

テスト環境とありますが、テスト環境って本番環境と同じ状況にしないとあまり意味がない時もあるかもしれないです。ちゃんと使う場合は、きっちり本番環境と同じ状況を作ってるほうがいいですよ❦

あ、長くなりましたが、文章って難しいですね。
他のトピを見ているとき、「それは何を指しているの？」と思うことが多々あるので、結構気を付けて書き込んだつもりでしたが、誰が見ても分かる文章を心掛けないといけないと改めて思いました。

ホンこれ！状態ですよね＾＾；

私自身も同じ状況です。記事を書くにしても同じだったりしますけど、初心者さんが多いのでURLなしでは状況を把握できないので、返信が結構シンドイかもしれないです！？

あとこのトピックもですけど、前提である　どのブロックを使ったかがないので、検索ユーザーさんは困るかも知れないです＾＾；
知ってて何今それ言ってんの？状態で、どこかしら申し訳ない気分ですが ? ? ? 

かうたっくさん、色々ありがとうございます。

今回の「スマホにて回り込み解除」の件は、!important の対応で対処することにしました。

https://lavinne.com/test/

テスト環境とありますが、テスト環境って本番環境と同じ状況にしないとあまり意味がない時もあるかもしれないです。ちゃんと使う場合は、きっちり本番環境と同じ状況を作ってるほうがいいですよ❦

テスト環境というわけではないのですが、依頼を受けてHP作成中のものでしたので、URLを公開できずに別URLで問題点を示したものでした。
なので、環境は同じにしてあります。

と言いながらも、うっかりミスで環境が違うことになっている場合もあるかもしれないので、今後注意しておきます<(_ _)>

今回、回り込み解除の件は解決しましたが、画像を小さくすると画像の右側に余白が出てしまうけんについては別トピで質問させて頂きます。

色々とご助言ありがとうございました！！

画像ブロックの回り込みに関しては、スマホ画面では回り込みは解除した方が見やすいと思うので、親テーマでも適用しておこうと思います（480px以下の画面）。
以下が実装したファイルです。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------