qooqで記事中の画像をfloatさせた時のmarginをスマホ表示で無くす方法

ふじやんさんにこちらで質問させていただいた

jさん、こんばんは。 画像の margin-right が効かない原因ですが、これは CSS の「初期化処理-*基本いじらない」の所の .separator a{margin-left:0!important;margin-right:0!important} のせいだと思います。 というわけで、対処法としては以下の3つのやり方がありますので、どれかをやってみてください。 ①初期化処理のこの部分を削除する。 ②CSS で .separator a{margin-right:1em!important} を追記する。 ③画像タグ内のスタイルの margin-right:1em に !important を付けて margin-right:iem!important; とする。

これに対してこちらで新たに回答をいただく 

> jさん 地味に難題で検証手間取りましたw(楽しんでますのでお気になさらずに) まず、画像が「変な感じ」という当該記事ですが、ソースを見てみると何かよくわからん <div> タグが混じってるみたい？ですので、お手数ですが、もう一度貼り直してみてはどうでしょうか。去年の暮の投稿のようで、ひょっとして当時と今とでは生成されるタグの仕様が変わってるのかも？うちでは常に画像の「配置」は左右に寄せず「なし」で貼ってるのでそのへんの所はよくわかりませんが… で、右マージンをいい感じに反映させる方法ですが、画像の HTML の margin-right に !important を挿入するのではなくやはり CSS で追記されることをおすすめします。

 以前ここのコメントで私が提案した中の②ですけど、少し訂正で以下のようにすると上手くいくのではないかと…(たぶん) @media (max-width:600px ) { .separator a { float:none!important; } } @media (min-width:600px ) { .separator img { margin-right: 1em; margin-left: 1em; } } たとえばpjさんとこのこちらの記事の下の方の2枚の左寄せの画像だと、記事の HTML を弄らなくても PC で右マージンが空いて、スマホで右が空かずキレイに収まってるはず…(たぶん) https://7x3bible.blogspot.com/2021/07/jezebel.html 私のスキルではこの辺が限界です(~_~;)

ふじやんさんに教えていただいた結果、次の通りにしました。まず「初期化処理-*基本いじらない」で検索をかけて、その中の  .separator aを見つけます。なぜか.separator a{margin-left:0!important;margin-right:0!important} になっていて、!importantだけが不要なので削除します。

ほんで次にこれ。

@media (max-width:479px ) {

.separator a {float:none!important;　

margin-right:0 !important;　

margin-left:0 !important;

　　　　　　}　　　　　　　}