楽天goldページの修正がしたい

Question

お世話になっております。

テストページの
https://www.rakuten.ne.jp/gold/〇〇〇/index_21.html

正方形の大きいバナースライド部分ですが、width100%にしているので大きいのですが、こちらの調整が上手くいかないため修正箇所をご教授いただけますと幸いです。

メインと下部のサム画像のバランスの参考サイトがございます↓
https://www.rakuten.ne.jp/gold/z-craft/

700pxぐらいだと思います。

横幅最大を1060pxに設定しているスタイルタグの中に入れておりますが、
スライドバナーだけ参考サイトのように横幅いっぱい表示をしたいです。

明日中にご回答頂けないでしょうか？
ご確認宜しくお願い致します。

Answer

ECマスターズの伊藤です。

> 横幅最大を1060pxに設定しているスタイルタグの中に入れておりますが、
> スライドバナーだけ参考サイトのように横幅いっぱい表示をしたいです。

いただいたページですが、

全体が

で囲われているため、
バナースライドの部分も、こちらの枠内で
表示されてるようになってしまいます。

そのため

=====


ヘッダー


バナースライド


バナースライドよりししたの部分


=====

といった構造に変更して頂ますよう
お願いいたします。

Answer

ご回答有難うございます。

横幅いいっぱいは修正後できたのですが、

.slider2 img,
.thumb img{
	height: auto;
	width: 100%;

の影響で元画像900pxより大きい画像になってしまいます。
700pxぐらいに調整するにはどこを修正すれば宜しいでしょうか？
単純に

width: 700px;
にすると左右の少し透明バナーとのバランスがおかしくなりました。

Answer

ECマスターズの伊藤です。


> の影響で元画像900pxより大きい画像になってしまいます。
> 700pxぐらいに調整するにはどこを修正すれば宜しいでしょうか？
> 単純に
> 
> width: 700px;
> にすると左右の少し透明バナーとのバランスがおかしくなりました。

レスポンシブ対応のため、
横幅に準じた画像サイズとなってしまいます。

Slickをご利用かと思いますが、

https://125naroom.com/web/3198
10. 画面幅いっぱいに並べてスライド（企業サイトでよく見かけますね）

の設定にて

https://125naroom.com/demo/slick.html#s_10

の表示になるようなので、
こちらの設定で変更可能か、ご確認くださいませ。