• 文字サイズ
解決済

【owl-carousel】レスポンシブスライダーの横幅をスマホに対応させる

  • 相談者:非公開
  • 2019/06/10 17:10
こんにちは。楽天GOLDにPCスマホ共用のトップページをつくっています。
https://www.rakuten.ne.jp/gold/off-price/
スライダー部分に、owl-carouselというJsでスライダーを設置しました。
*******************************************
<!-- Hero section -->
<section class="hero-section" >
<div class="hero-slider owl-carousel">
<div class="hs-item set-bg" data-setbg="img_hero/bg-1.jpg">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-7 text-white">
<span>Hero Brand</span>
<h2>Kate Spade</h2>
<p>ほんの少しの勇気で世界は変わる!<br>
日常生活をカラフルに彩り、明るく華やかな愛らしさで、「ファッションの喜び」というエッセンスを貴女の毎日に...</p>
<a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/" class="site-btn sb-line">DISCOVER</a>
</div>
</div>
以下略
*******************************************
スライダーの画像は横が1920pxです。

PC表示では、ブラウザの横幅に応じて、可変します。
一方、スマホで見たときに、横がはみ出します。
画像のサイズを小さくしてみましたが、引き伸ばされて表示され、画質が悪くなるだけででした。
また、CSSの
hero-sectionにmax-width="**px"で、最大幅を入れてみましたが効かないようです。

スマホで商品ページを見たときの様に、横のサイズをスマホあうようにするには、どこを直せばよいでしょうか?

WEB制作は、初心者です。

宜しくお願い致します。
投稿内容について報告する




  • 返信者:非公開
  • 2019/06/10 18:19
ECマスターズの伊藤です。

> スマホで商品ページを見たときの様に、横のサイズをスマホあうようにするには、どこを直せばよいでしょうか?

画像が .h………(省略)………
  • 返信者:非公開(質問者)
  • 2019/06/10 18:51
こんばんは。ご返信ありがとうございます。

スマホサイトにおいている自作のスライダーと全く構造が違っているということがわかりました。

おっしゃる通り、………(省略)………
  • 返信者:非公開
  • 2019/06/10 19:13
ECマスターズの伊藤です。

> ご教授の方法で、やりたかったことそのものはできたのですが、今度は、上に乗っかっている文章がはみ出するという別の問題が浮上し………(省略)………