GOLDページに設置したcssでポップアップするウィンドウをスマホにも対応させるには

Question

お世話になっております。
配送期限についてクリックすると画像が開くように設置したのですが、
スマホで確認すると画像が小さく表示されてしまいます。
PC、スマホどちらにも対応させることは出来ないでしょうか。
https://www.rakuten.ne.jp/gold/yamaguchi-seni/sale/gift-feature.html

Answer

ECマスターズの田中です。

いただいたページを確認したところ、
https://www.rakuten.ne.jp/gold/yamaguchi-seni/sale/css/gift-feature-content.css
上記CSSファイルにて、
ポップアップ部分を囲む「.popup」に対して、

width: 55vw;
height: 45vw;

上記のようにご設定されていることがわかりました。
つまり、スマートフォンで閲覧した場合も、
全体の横幅の５５％で表示されてしまいます。

ページのコンテンツ部分、中央の1000px分については
PCもスマホも、同じ幅として表示される扱いとなっておりますので、
たとえば

width: 1000px;
height: 850px;

のように、固定値で表示していただくのはいかがでしょうか。

Answer

ご回答ありがとうございました。無事表示確認できました。