”インデックストップ”　ウィジェット設定で一覧表示の際、少し空間が開きます

@media screen and (min-width: 64em) {
  #main #widget-index-top {
    margin: 0;
  }
}

こんな感じですかね。
64em≒1024pxです。1024px以上の画面幅の時という感じです。

試してないのでうまく行くかわかりませんが、子テーマfunctions.phpに

add_action('body_class','add_mobile_class');
function add_mobile_class($classes) {
	if (is_mobile()) {
		$classes[] = 'mobile';
		return $classes;
	} else {
		return $classes;
	}
}

こうすると、モバイル端末の時にbodyタグに.mobileが入るかと思います。もし正しく動作すれば、

#main .widget {
  margin: 0; /*モバイル以外*/
}

.mobile #main .widget {
  margin-top: 20px;
  margin-bottom: 20px;
}

こういう書き方もできます。

jqueryでやる場合は、
参考: Simplicityを少し改造してみた part16 jQueryでモバイル判別 bodyにmobile classを挿入 | blazechariot -Xdomain-

上記で説明しています。リサイズを考慮しないのであれば$(window).on("load resize", function(){...})は必要ありません。

今記事を読み直したらPHPでやる方(functions.phpの方)もいつの間にか書いていました。

Hidekichi様

お久しぶりです。ご返信ありがとうございます。

>こうすると、モバイル端末の時にbodyタグに.mobileが入るかと思います。もし正しく動作すれば、

モバイルは正常に表示されていますので、これを記述する事でPC表示で起きている「上にスペースが空く」。いわゆる、PC表示なのでモバイル用のウィジェットが内容は表示されないけど、そのウィジェット自体の存在を出してきてスペースを取ってくる事を解消できると言う事でしょうか？

わいひら様
いつもありがとうございます。

>テキストウィジェット系か余裕をもって余白を撮ってあるのは仕様となっています。
>広告を入れるだけではないですし…

なるほど。理解しました。ありがとうございます。

>※キャッシュプラグインのせいか、PCで見てもモバイルページが表示されていてPCページは見ることができませんでした。

うひゃ〜ですね。
サイトスピードアップのためにと欲を出して、わいひらさんが教示してくださっているキャッシュプラグインから別の物に変えたのが原因だと思います。
早速、変更します。教えてくださってありがとうございます。

CSSで調整は頑張ります。

最近、サイトスピードアップを心がけて改めてSimplicityの素晴らしさを感じております。
何がというと、CSSやphpなど詳しくない私でも、比較的カスタマイズしやすい環境、オープンなところに各ファイルを優しく置いてくださっているという風に感じました。（chromeなどでcssなどを検証したりするときにわかりやすいのです）

やはりテーマって作成者の方の思いや、配慮というか人間性が強く出ますね。作品ですものね。
わいひらさんの優しさに改めて感謝しましたし、Hidekichiさんをはじめとしたサポーター的なポジションにいらっしゃる皆さんにも、私のような素人衆が助けられている環境が改めていいなと思いました。

おそらく皆さんも、私と同様と言えば大変失礼ですが、わいひらさんの人間性、生き様に共感しているのかなと改めて感じた次第です。

今後も活躍を期待しておりますので、どうかご自愛くださいますように。

#50106は、同じことを別の方法で書いています。

メディアクエリを使うだけでもイケるでしょうし、メディアクエリは管理しにくいのでbodyタグに何かしらモバイル状態を識別できるものが入れば、メディアクエリを使わずともスタイルできるという例です。

意味合い的にはPCで見た時、デフォルトでマージンが入っているのが問題なのでそれを初期化し、モバイルの時だけマージンを入れるという意味合いです。

メディスクエリの場合は、画面サイズで判断し1024px以上の時はマージンが必要ないわけですから、0で初期化してます。1024px以下の時はデフォルトのままです。

ちなみに2つ目の.mobileクラスをbodyタグに入れるのはindex-topを表示非表示にも使えます。
試してませんが、

#widget-index-top {
  display: none;
}

.mobile #widget-index-top {
  display: block;
}

メディアクエリの場合、スマホの画面幅が不定なので弾ける場合もあれば弾けない場合もあるため何かしらで識別する必要があります。それが.mobileクラスというわけです。かといって例えば時期iphoneなどがユーザーエージェントを変えてしまったら利用ではなくなったりするかも知れないので、いずれにしても完璧というわけではありませんが、だいたい問題ないかとおもいます。

わいひら様
Hidekichi様

ありがとうございます。
私も含めて色々と要望が多い、質問が多くてご迷惑をかけてしまい申し訳ないです。
教えていただいたようにやってみます。