ショップ内検索君＆イベント更新君のスマホgold表示

Question

いつもお世話になっております。

楽天goldでトップページ表示させているのですが、
今回ショップ内検索君＆イベント更新君を設置した際に
PC側は正常に表示されているのですが、スマホ側だとおかしな表示になります。
使用したコードはこちらです↓↓↓


.emRPBandSearch{display:flex;justify-content:space-between;max-width:1000px;margin: 0 auto;}.emRPB{margin:0;padding:0;flex:0 0 510px;}.emSearch{width:calc(100% - 525px);}.emShopSearchForm{width:100%;margin:0;}.emShopSearchForm > *{vertical-align:bottom;box-sizing:border-box;height:38px;}.emShopSearchInput{width:calc(100% - 45px);height:38px;border:2px solid #bf0000;border-radius:3px;text-indent:8px;font-size:12px;font-family:"Meiryo", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;line-height:32px;}.emShopSearchButton{border:none;border-radius:3px;width:48px;margin:0 0 0 -3px;cursor:pointer;background:#bf0000 url(/com/img/home/itempage/haeder_sprite.png) no-repeat 1px -239px;}



スマホも綺麗に表示させる方法はありますでしょうか？
宜しくお願い致します。###HR######IMG0b64beafb0250c7e2925acb18e73a8c8b.jpegIMG0###

Answer

ECマスターズの伊藤です。

> 今回ショップ内検索君＆イベント更新君を設置した際に
> PC側は正常に表示されているのですが、スマホ側だとおかしな表示になります。

こちらは、PC用となり、スマホの幅に対応していないため、
表示が崩れてしまいます。

PCとスマホで共通のHTMLを使用するのは難しいので、
現在、トップにてご利用頂いている

イベント告知君
検索窓

といった形で
ご対応頂ますよう、お願いいたします。

Answer

何度もすみません。
イベント告知君単体のスマホgold対応版を設置してみたのですが、
PC版の表示がおかしくなります。(画像が極大の大きさになります)

コードがこちらです↓↓↓




イベント告知君単体でもPC版・SP版両方に綺麗に表示させるのは無理でしょうか？

Answer

ECマスターズの伊藤です。

> イベント告知君単体のスマホgold対応版を設置してみたのですが、
> PC版の表示がおかしくなります。(画像が極大の大きさになります)

スマホ用は、様々なデバイス幅に対応できるよう、
横幅を親枠いっぱいに表示する設定になっています。

そのため、横幅の最大値(max-width)を指定することで、
ご対応可能かと思います。

max-widthの値はご希望のサイズによって
変更をお願いいたします。

ソースは下記の通りとなります。