レスポンシブ

Question

こちらのページを真似して製作しているのですが、
スマホ用にリサイズのコードをうまく組めません。

できたら2カラムの部分はスマホにしたらフロートを解除してWidth100%にしたいのですが
どのように組んでいけば宜しいでしょうか。

ご教示お願いします。

http://www.marianaocean.work/lptest/float/soap.html

こちらがURLです。

Accepted Answer

ECマスターズの田中です。

最初に、
およびに対する
position:relative; および position:absolute; による
レイアウトの解除をご検討ください。

この方法は、
決まった大きさの要素を決まった座標に設置するためには
最適なのですが、
ページの大きさも、要素の大きさも変動する
レスポンシブデザインのページには不向きです。

必要がなければ、positionの指定を
外していただきますようお願いします。
必要がある場合は、その旨お知らせください。

次に、各要素から
高さの指定を削除し、
横幅を固定値（400px、710pxなど）から割合（100%、80%など）に
ご変更いただくことで、
PCで２カラム・スマホでフロート解除＆width100%、を
実現することができます。

まずは上記の通り修正していただいた後に、
細かい幅の調整を行っていただきますようお願いします。

Answer

https://www.marianaocean.com/float/soap.html

無事実装できました
ただ、サーバにあげたらボタンが動かなくなりました。
これは何が問題でしょうか？

Answer

ECマスターズの田中です。

ソースの中に「http://」で始まるURLが含まれており、
ブラウザにより読み込みがブロックされていることが
原因ですので、
「https://」に修正していただきますようお願いします。