ポップアップバナー設置について

Question

ECマスターズ様
いつもお世話になっております。
以前こちらでスマホページに載せるポップアップバナーのコードをいただいたのですが
PCページに使う際にレイアウトがズレてしまったので
PCページに対応するコードまたはPC、SP併用可能なコードを頂くこと可能でしょうか。
イメージは依然と同じで

１つのポップアップバナー（正方形）の中にそれぞれ別の正方形のクーポン画像が4つ
1　2
3　4

並ぶ感じです。
何卒よろしくお願いします。###HR######IMG0950e1216bd14fac7a804a5001b6b30f0.jpegIMG0###

Answer

ECマスターズの土屋です。

頂いたご質問に関しまして
ご回答まで少々お待ち下さいませ。

Answer

ECマスターズの土屋です。
ご連絡がおそくなり申し訳ございません。

私のほうで
PC用のポップアップのHTMLとCSSを作成させていただきました。
前回と同様にこちらでお試しいただき、
表示されるかご確認頂けますと幸いです。

どうぞよろしくお願いします。

【コード】

    
        p {
            margin: 0 auto;
        }

        input#modal {
            display: none;
        }

        input#modal+label {
            width: 100%;
            height: 120%;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2147483646;
            background: rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }

        input#modal+label div {
            background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
            border: medium none;
            position: fixed;
            width: 640px;
            /*画像の横幅*/
            height: 330px;
            /*画像の縦幅*/
            bottom: 0;
            left: 0;
            margin: auto;
            right: 0;
            top: -50%;

        }

        .test::before {
            content: "× Close";
            position: absolute;
            bottom: -130%;
            right: 50%;
            margin: 0 -60px 0 0;
            font-size: 3em;
            font-weight: bold;
            color: #ffffff;
        }

        input#modal:checked+label {
            display: none;
        }

        input#modal+label img {
            width: 300px;
        }

        .test {
            display: flex;
            flex-wrap: wrap;
        }

        .test a {
            padding: 10px;
            display: inline-block;
            box-sizing: border-box;
        }

Answer

ありがとうございます！
返信遅くなり申し訳ございません。

問題なく表示出来ました！
いつも助かっています。
引き続きよろしくお願い思します！

Answer

ECマスターズの土屋です。

>問題なく表示出来ました！

ご共有ありがとうございます。

引き続きどうぞよろしくお願いします。