CSSについて。画像と文字のスペースが広すぎてしまう感覚を縮めたい（上下の）

Question

ブログの関連記事のレイアウトをいじっているのですが、以下の画像のようにサムネイル画像と文章に感覚が空きすぎてしまいます。
ウェブデザインなどの知識はほとんどないのでどこで治せるのか理解がないですが、おそらく以下のCSSのコードで設定できるのではと思います。

#post-related .feat-cat-meta {margin: 0px 0.2em 0.2em 4px !important;}

もしこのような現象を治すことがこれらの情報でわかるのであれば、是非ご教授いただきたいです。
また、ほかに可能性がある場合で見当がつく場合もご教授いただけると幸いです。

よろしくお願いいたします。

パソコン画面▼

Answer 1

コードが全く載っていないと CSS だけ書かれても原因は特定できません。
スクリーンショットに URL が見えたので確認したところ 218 行目付近の
.related-post-thumb に height: 150px; を指定しているのが原因のようです。

---

補足
メディアクエリを使用して PC とスマートフォンとで別のスタイルを当てるようにします。
当該 CSS だと 534 行目付近に次のような記述があるのでその中に追加します。

@media only screen and (min-width: 300px) and (max-width: 770px) {
    /* この中はスマートフォンのみ適用される */
    .related-post-thumb {
        height: 150px;
    }
}

Comments

[ninopato1]

ご教示いただきありがとうございます！
問題の箇所を操作することができました。

しかし、指定の箇所で変更をしたのですが、スマホでは適切な数値にしたところ、パソコンでは画像の部分が潰れてしまうのですが、この現象を改善する方法もあれば教えていただけると幸いです。※パソコン画面のスクショを質問画面に追記しておきます。

URL→ ninomiyapatoriku.com