CSSを作る方の好み？なのでしょうか

スマホ一台しかないので少し不安でしたがどんな画面幅であってもキレイに表示されるようになって良かったです。

回答くださった内容で知らないことだからだった為、調べながら解決できたことが嬉しくとても勉強になりました。

ありがとうございました。

私もあまり詳しくないのですが、以下のような書き方もできるっぽいです。

#appeal {
    height: calc(100vw * 5/15);
}

何が正しいのか、よく知らないんですけどね。

確かに、どんな画面幅であっても、キレイに表示されるようになりましたね。 ? 

リファトリー様

この度はお忙しい所丁寧なご指導をしてくださり誠にありがとうございました。

無事にスマホとＰＣでアピール画像表示されるようになりました。ここ数週間悩んでいたので解決できてほっとできました。

さきほど自宅に戻りました。

すみません。私の計算が間違っていました。

500px÷1500px＝0.333333 なので、

0.34ぐらいで試してみてください。

#appeal {
    height: calc(100vw * 0.34);
}

外出中なのにもかかわらず返信下さり誠にありがとうございます。

不要なコードの削除。

スマホ、PC共に両端がうまく表示されるようになりましたが今度は胴体が切れてしまうようになってしまいました。

これはスマホの場合高さの指定が出来ないからということでしょうか。

0.3を0.4にすると

PC→胴体切れず両端もキレイに表示される

スマホ→拡大されるせいなのか両端はきれるが胴体はきれない。

こんな感じになっております。

朝質問したときよりゴールが見えてきたのでとても感謝しております!!

次に追加CSSにコピペしたコードは、一旦、全部削除してください。

その次に以下のコードだけをコピペしてみてください。

/*アピールエリアの高さを調整*/
#appeal {
    height: calc(100vw * 0.3);
}

先ず、子テーマにお書きの以下のCSSは不要になりますので、削除してください。

大変申し訳ございません。

お手すきのタイミングで構いませんありがとうございます。

コメントアウトという意味が分かりました私の場合消さないほうが後々良さそうなのでこのままにしようと思いました。

現在、

#content-top-in {
width: 100%;
}

.widget.widget-content-top.widget_media_image img {
display: block;
width: 100%;
}
#appeal {
height: calc(100vw * 0.4);
}

height: calc(100vw * 0.4);

こちらを0.3にすると胴体が切れてしまうので0.4にしてみました。

ただ、0.4にするとスマホ側がおかしくなってしまうようです。