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

Question

こんにちは。お世話になっております。
トップページに、イベント告知くんを設置する作業を行っております。
https://www.rakuten.ne.jp/gold/off-price/r-index0613-2.html

Bootstrapの箱の中にいれてみたところ、
PCで見たときには、検索窓とイベント告知くんが並ぶようになり、ブラウザを狭くすると二段になってくれるのですが、スマホで見たときに、検索窓は画面の中央にきちんと配置される一方、イベント告知くんは、右端が見切れてしまいます。
iframeを中央寄せに使用としてみたり、横幅をpxや％に変えてみたり、見切れない様にしてみたのですが、うまくいきません。
どこを触るとよいでしょうか？

	
	
		
			
				
					
						
							
							
							
						
					
                    
				
			
		
	
	###HR######IMG0b5a8817377e09b9106566155e21c204b.jpegIMG0### ###IMG1c96d313569a3bb1c7439b14a34f6ffdc.jpegIMG1###

Accepted Answer

ECマスターズの田中です。

無事、解決いただけて何よりです。

> hidden-**　が効かない理由とでもダメな理由は迷宮入りしました。

index2.htmlを拝見したところ、
Bootstrap4をご利用いただいておりましたので、
v3→v4の変更で各クラスが廃止されたことが原因です。

下記ページにて、今後ご利用いただけるクラスをご参照願います。
https://webnetamemo.com/coding/bootstrap4/201710015697

Answer

ECマスターズの山岡です。

スマートフォン向けのイベント告知君は、別途Iframeをご用意しております。



xxxxxxx　は、店舗名になります。

PCとスマホで出しわけが必要になりますので

bootstrap　の
visible-xs
visible-sm
visible-md
visible-lg

を使ってみてはいかがでしょうか？


イベント告知君のiframe


xsのサイズの時のみ表示されます。
一度、お試しいただければと思います。

Answer

こんばんは。ご回答ありがとうございます。


イベント告知君のiframe

を入れてみたり、ROW や Container　でさらに挟むなど、ネットでBootstrapの解説ページ見ながらやってはみたものの、どうやっても横幅に応じて、消えてくれず今の時間になりました。

結果、今は、下記の様な内容にたどり着き、結局、常時、PC用の告知くん、スマホ用の告知くんが出ています。
横幅がxsの時には、PC用の告知くんを非表示、その他のときにはスマホ用の告知くんを非表示にするには、どうすればいいでしょうか？

スマホ用のiframeをcontainerやlowに入れると、小さくなって、画面の左端によってしまうので、横幅いっぱいになるように、の外において、やで挟んでも見ました、
また、それをさらにROW や Containerにもいれてみましたが、答え出ず、再度質問させていただきます。

https://www.rakuten.ne.jp/gold/off-price/index2.html

Answer

【その後】
理屈はよくわからないのですが
PCのバナーを
 
スマホの告知くんを

で挟んだところ、希望のようにはなりました。

hidden-**　が効かない理由とでもダメな理由は迷宮入りしました。

Answer

田中様

ありがとうございました。
自分で調べていて、いろいろなABテストをしていた結果、なんとか正解にたどり着いてよかったです。

まだ、不勉強で、御手数をお掛け致しました。
引き続き、学習してまいります。

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

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