• 文字サイズ
解決済

イベント告知くん をBootstrapの箱の中に入れて、スマホで見切れない様にしたい

  • 相談者:非公開
  • 2019/06/13 14:17
こんにちは。お世話になっております。
トップページに、イベント告知くんを設置する作業を行っております。
https//www.rakuten.ne.jp/gold/SHOP-URL/r-index0613-2.html

Bootstrapの箱の中にいれてみたところ、
PCで見たときには、検索窓とイベント告知くんが並ぶようになり、ブラウザを狭くすると二段になってくれるのですが、スマホで見たときに、検索窓は画面の中央にきちんと配置される一方、イベント告知くんは、右端が見切れてしまいます。
iframeを中央寄せに使用としてみたり、横幅をpxや%に変えてみたり、見切れない様にしてみたのですが、うまくいきません。
どこを触るとよいでしょうか?

<!-- Header section -->
<header class="header-section">
<div class="header-top">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-5">
<form class="header-search-form" name="myForm" method="get" action="https://esearch.rakuten.co.jp/rms/sd/isearch/vc" accept-charset="EUC-JP">
<input type="hidden" name="sid" value="SHOP-ID">
<input type="text" name="sitem" id="sitem" placeholder="何かお探しですか?">
<button><i class="flaticon-search"></i></button>
</form>
</div>
<iframe src="https//www.rakuten.ne.jp/gold/SHOP-URL/rpoint_box/rpoint_box_scroll.html" width="510" height="75" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" hspace="0" vspace="0"></iframe>
</div>
</div>
</div>
</header>
<!-- Header section end -->
投稿内容について報告する




  • 返信者:非公開
  • 2019/06/13 17:00
ECマスターズの山岡です。

スマートフォン向けのイベント告知君は、別途Iframeをご用意しております。

<iframe ="" src="http………(省略)………
  • 返信者:非公開(質問者)
  • 2019/06/14 00:51
こんばんは。ご回答ありがとうございます。

<div class="visible-xs">
イベント告知君のiframe
</div>
を入れてみた………(省略)………
  • 返信者:非公開(質問者)
  • 2019/06/14 09:44
【その後】
理屈はよくわからないのですが
PCのバナーを
<div class="col-xl-6 col-lg-6 col-sm-12 col-xs-………(省略)………
  • 返信者:非公開
  • 2019/06/14 13:57
ECマスターズの田中です。

無事、解決いただけて何よりです。

> hidden-** が効かない理由と<div class="visible-xs"………(省略)………
  • 返信者:非公開(質問者)
  • 2019/06/14 14:22
田中様

ありがとうございました。
自分で調べていて、いろいろなABテストをしていた結果、なんとか正解にたどり着いてよかったです。

まだ、不勉強で、………(省略)………