現在メインカラムをデフォルトのものより狭めているようですけど、どのようにカスタマイズされたのでしょうか？

cocoon設定＞カラム

の場所のことでよろしいでしょうか？

＞メインカラム設定

メインカラム設定:656px
コンテンツ余白幅:20px
コンテンツ枠幅:0px

＞サイドバー設定

サイドバー幅:286px
サイドバー余白幅：7px
サイドバー枠線幅:0px

＞カラム間余白設定

カラム間の幅:15px

とそれぞれ設定しております。

また、記事ページ以外のメインカラムとサイドバー間を狭めたいため、子テーマのスタイルシートに、

/**メインとサイドバーの間**/
@media screen and (min-width: 1020px) {
.category #main,
.home #main,
.tag #main,
.archive #main
{
padding-right:0px;}}

と記述しています。

Cocoonと同じ設定にすれば良いかと思いますけど、それではダメですか？

1020px台でメインカラムのみの表示となってしまうと記事が横に伸びて読みにくくなるので、cocoonサイトと同じように画面サイズに合わせてメインカラム・サイドバー幅も縮んでいくようにしたいのですが、どのようにすればよいでしょうか？

＞メインカラム設定

メインカラム設定:656px
コンテンツ余白幅:20px
コンテンツ枠幅:0px

＞サイドバー設定

サイドバー幅:286px
サイドバー余白幅：7px
サイドバー枠線幅:0px

＞カラム間余白設定

カラム間の幅:15px

余白などの数値を小さ目に変更してみるのもアリかもです。おそらく。

実際に試してはないですが、以下のような感じで元のCSSを打ち消すコードを書くしかないかも。

@media screen and (max-width: 1023px){
  .content-in{
    display: flex;
  }
  main.main,
  div.sidebar{
    margin: 0.5%;
  }
  main.main{
    width: 67%;
  }
  div.sidebar{
    display: block;
    width: 30%;
  }
}


@media screen and (max-width: 設定したい幅px){
  .content-in{
    display: block;
  }
  main.main,
  div.sidebar{
    margin: 10px;
    width: auto;
  }
  div.sidebar{
    display: none;
  }
} 

＞かうたっくさん

ありがとうございます。

確かにcocoonと同じ設定にすればクリアになるかもしれませんが、今の大きさのほうが内容的にバランスが良いと感じるので質問させていただきました。

余白幅もいろいろ試してみたいと思います。

>わいひらさん

ありがとうございます。

@media screen and (max-width: 1023px){
  .content-in{
    display: flex;
  }
  main.main,
  div.sidebar{
    margin: 0.5%;
  }
  main.main{
    width: 67%;
  }
  div.sidebar{
    display: block;
    width: 30%;
  }
}

とりあえずこちらのほうをコピペさせていただいたところ、メインカラムは縮んでいく理想の形になりました。ですが、サイドバーは相変わらず1023pxあたりで消えてしまうようで、画像のような状態になってしましまいました。

ん～、自分では原因が分からないのが情けない。

もしかしたら元々の不具合「表示画面の大きさが1023pxになったとき、メインカラムが全体表示?になってしまう」は、サイドバーが消えるためかもしれません。

その原因としては、サイドバーのカスタマイズにあるのか否か...

いろいろ試してみてまたご報告させていただきます。

こんな感じになってしまってるのは見落としてました。

前私が見たとき、大画面でカラム落ちしてない状態で1カラムになってた記憶があります。←これ見落とし。

Cocoon設定で幅だけでなく余白も調整すれば、カラム落ちはしないので、子テーマの該当styleを削除して、Cocoon設定で行ってみるのが良いと思います！

とりあえずこちらのほうをコピペさせていただいたところ、

どっちかだけだと多分だめだと思いますよ。しっかりと両方書いて「設定したい幅」の部分を変更しないと。

@media screen and (max-width: 1023px){
  .content-in{
    display: flex;
  }
  main.main,
  div.sidebar{
    margin: 0.5%;
  }
  main.main{
    width: 67%;
  }
  #content #sidebar{
    display: block;
    width: 30%;
  }
}


@media screen and (max-width: 設定したい幅px){
  .content-in{
    display: block;
  }
  main.main,
  div.sidebar{
    margin: 10px;
    width: auto;
  }
  #content #sidebar{
    display: none;
  }
} 

サイドバーが消えることについては、CSSセレクタの優先度があっていませんでした。
これもうまくいかは、分からないけど試してみていただければ。

>かうたっくさん

伝わりづらくてすみません。

わいひらさんに教えていただいた最初のcssコピペ後の状態が画像のようになっていた、ということです。

コピペ前、つまり最初に見ていただいた状態はかうたっくさんの言う通りで間違いないです。

＞わいひらさん

ありがとうございます。

両方を書いて希望通りの形となりました。微調整や全体のバランス調整をして理想の形にしたいと思います。

子テーマのstyleは関係ない状態でカラム落ちしてたんですかね？？

どちらにしても上手くいったようで良かったですね＾＾

>かうたっくさん

いえ、関係ある状態で落ちていました。子テーマを何もいじらなければ落ちることはなかったです。

ありがとうございます！