レスポンシブ対応のテーマを使用していてもモバイル表示にした場合、どうしてもはみ出してしまう部分や、見やすくするために非表示にしたい部品が出てくると思います。
そんな時はスクリーンのピクセル別にｃｓｓを設定しましょう。

「style.css」にコードを追加

ダッシュボード→「外観」→「テーマの編集」で「style.css」を選択し、エディタの画面を開きます。
割と下の部分に「@media screen and (min-width: 9999px)」の記述がありますので、スクリーンの大きさ別にcssのコードを追加します。
ちなみにカッコの中のピクセルの数値より小さい場合、ブロック内のスタイルが適用されます。

例）モバイル表示の場合、サイドバーを非表示にする

スクリーン幅が1008pxより小さいモバイル画面の場合に適用

@media screen and (min-width: 1008px) {

  #content-sidebar {
    visibility: hidden; /* 非表示 */
  }

.......

同じような感じコードを追加すれば幅を調整したり画像サイズを変更したりの出来ます。

例）モバイル画面の表示確認

それぞれの機種により画面サイズも違ってきますので、テスト機を機種別に用意するのは難しいでしょう。
表示テストにはブラウザの「Google Chrome」を使用すると便利です。
右上のボタンから「その他ツール」→「デベロッパーツール」を選択します。

モバイルのアイコンをクリックしリストから機種を選択すると、その機種での画面表示に切り替わります。

レスポンシブ対応のテーマは初期値でワードプレスに入っている「Twenty」の付く名前の「Twenty …」は対応しています。
気になるテーマを実際にインストールしてみて表示を確認してみるとよいでしょう。

テーマの選択

ダッシュボード→「外観」→「テーマ」で使用するテーマを「有効化」します。

選択したテーマがレスポンシブ対応か確認

テーマの説明文に書いていれば、すぐわかりますが「レスポンシブ対応」と書いていないテーマが殆どです。
ネットでインストールしたテーマが対応しているか調べることも出来ますが、すべてのテーマの情報が載っているわけではないですので、実際に表示を確認してみると簡単に判別できます。
ブラウザのウィンドウ幅を狭くしたときに表示が変われば使用しているテーマはレスポンシブに対応しています。