楽天市場　イベント時などスマホトップページにポップアップバナーを設置したい

Question

いつもお世話になっております。
以前他社ショップで確認したのですが（添付画像参照）
１つのポップアップバナー（正方形）の中にそれぞれ別の正方形のクーポン画像が4つ
1　2
3　4
といった感じで並んでいるのを見てやりたいなーと思っていたのですが
可能でしょうか？？

デザインレシピからポップアップバナーを設置することは出来たのですが
１つのポップアップ枠の中に4つ表示させる方法が分かりません。

ご教示お願いできますでしょうか？？###HR######IMG06d56ed0f0a10788b26b3a4ad9b35598e.jpegIMG0###

Answer

ECマスターズの土屋です。

>ご教示お願いできますでしょうか？？

事務局側でスマートフォン用の四等分された
ポップアップのソースを作成させていただきました。

もしよろしければ
こちらのソースをスマートフォン用の
ポップアップにご利用くださいませ。

どうぞよろしくお願いします。


    
        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: 300px;
            /*画像の横幅*/
            height: 330px;
            /*画像の縦幅*/
            bottom: 0;
            left: 0;
            margin: auto;
            right: 0;
            top: -50%;
            
        }

        .test::before {
            content: "× Close";
            position: absolute;
            bottom: -50%;
            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: 100%;
            /*画像の横幅*/
            /* height: 330px; */
            /*画像の縦幅*/
        }
        .test {
            display: flex;
            flex-wrap: wrap;
            /* width: 800px !important; */
            width: 100% !important;
        }
        .test a {
            padding: 10px;
            display: inline-block;
            box-sizing: border-box;
            width: 50%;
        }

Answer

ECマスターズの土屋様

お世話になっております。
バッチリ表示できました！
ありがとうございます。

これからイベントなどで活用してしていきたいと思います。
今後ともよろしくお願いいたします。

Answer

ECマスターズの土屋です。

>お世話になっております。
>バッチリ表示できました！
>ありがとうございます。

嬉しいご報告、
ありがとうございます。

引き続きどうぞよろしくお願いします。

Answer

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

楽天市場 イベント時などスマホトップページにポップアップバナーを設置したい

楽天市場　イベント時などスマホトップページにポップアップバナーを設置したい